小工具      在线工具  汉语词典  css  js  c++  java

Vue.js基础

# Vue,vue.js,前端,javascript 额外说明

收录于:158天前

Vue特性

数据双向绑定
输入到vue容器中的数值自动与对应变量绑定,无需通过DOM操作来获取。
数据驱动视图:
视图或根据数据来动态变化,最常规的插值表达式:{ {}}
MVVM
Mvvm是数据驱动和双向数据绑定的核心,它把每个html差分三个部分model表示数据源,view表示页面所渲染的dom,viewmodel表示vue实例时mvvm的核心。
原理:当数据源发生变化会被viewmodel监听到,在自动渲染到页面中。表单的值发生变化也会被viewmodel监听到,并同步到model中。

Vue指令

  1. new Vue() 用于创建一个 vue 实例。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">	
		{
   {message}}
		</div>
		
		
		<script> new Vue({
       el:"#app", data:{
       message:'hello world' } }) </script>
	</body>
</html>

在这里插入图片描述

  1. Vue属性
    vue有很多属性,
    el,挂载元素,通过挂载标明vue实例来管理那些范围类的内容;
    data,就是双向绑定的数据的变量定义的容器;
    methods,是方法定义的容器;
    mounted(),是一个vue生命周期的方法在vue实例加载后自动调用;
    computed,计算属性当对数据需要计算处理时调用;
    filter,过滤器用来{ {}}和v-bind上,读数据进行预处理;
    watch,监听器,监听数据变化如路由变化,本质时一个函数会自动执行,要监听哪个数据变化将数据作为方法名即可;若有参数,第一个表示新数据,第二个表示旧数据。(方法监听)
    这几个是最常用的属性。

  2. vue 指令

  • v-on&@
    标签绑定点击事件,通过该指令可以调用vue实例中定义的方法。
<button v-on:click="func()">v-on</button>
<button @click="func()">@click</button>
  • @keyup.enter
    绑定键盘的enter键.esc绑定esc键
<button @keyup.enter="func()"></button>
  • v-bind
    数据绑定,标签中的某个属性与vue实例的数据中定义的变量绑定,从而实现动态变化。
<a v-bind:src="url"></a>
<!--简写-->
<a :src="url"></a>
<!--url是定义在data的变量,实现数据绑定-->
  • v-if and v-show
    条件判断和隐藏与显示
<p v-if="index > 10"></p>
<!--v-for=true就显示,否则就一隐藏;v-show同理-->
  • v-for
    循环,对数据循环并动态驱动视图。
<ol>
	<li v-for="(item,index) in list" :key="index"></li>
</ol>
<!--list是可循环的对象,item是每一个元素,index是索引,key是,每个for的标识,用于区分每个循环项-->
  • v-model
    数据双向绑定,在定义即内部都可以使用data中的数据
{
   { message }}
<input v-model="message"/>
<!--输入框的值会自动绑定到message并显示-->
  • v-text
    js的textContent(),动态插入data绑定的变量的值
<p v-text></p>
...
{
    
	...
	data:{
    
		txt:"Hello"
	}
}
  • v-html
//和-text一样,只不过这里插入的是html数据

这些是最常用的属性。

Vue组件

一个vue实例有一个e​​l属性来挂载容器,那么如果有多个vue实例怎么办?一个一个的创建vue容器就太麻烦了。 Vue组件可以解决这个问题。每个组件都是一个可重用的 vue 实例。

  • 全球注册
  1. 组件注册
//定义组件
Vue.component('one',{
    
	data:function(){
    
		return{
    
			count:0
		}
	},
	template:'<h1>{
    {count}}</h1>'
})
//one是组件名,后面是一个对象,相当于一个新的vue实例,对象中定义的各个属性和方法
//注意要先将组件注册到vue中在创建vue实例,顺序不对报错:
//vue.js:634 [Vue warn]: Unknown custom element: <btn-me> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

  1. 参考组件
<one></one>
<!--调用组件就是组件名标签,这个标签会被替换为定义时template中的内容-->

在这里插入图片描述

<!--完整代码-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue组件全局注册</title>
		<script src="vue.js"></script>
	</head>
	<body>
		
		<div id="app1">
		  
		  <!--引用组件-->
		  <one></one>
		</div>
		
		<script type="text/javascript"> //定义组件 Vue.component('one',{
       data:function(){
       return{
       count:0 } }, template:'<h1>{
      {count}}</h1>' }) //注意要先蒋组件注册到vue中在创建vue实例,顺序不对报错: //vue.js:634 [Vue warn]: Unknown custom element: <btn-me> - did you register the component correctly? For recursive components, make sure to provide the "name" option. new Vue({
      el:'#app1'}) </script>
	</body>
</html>

  • 部分注册
<!--局部组测只能在该html页面使用-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue组件局部注册</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app2">
			<mytest></mytest>
			<ismybutton></ismybutton>
			<br>
			<articles></articles>
		</div>
		
		<script> new Vue({
       el:'#app2', components:{
       //注册组件 mytest:{
       //组件名称 template:'<h2>注册组件</h2>' //组件模板 }, ismybutton:{
       template:'<button style="width: 100px; height: 50px; background-color: #409EFF;">hello</button>' }, articles:{
       template:'<h6>文章标题</h6><br><p>内容</p>' } } }); </script>
	</body>
</html>
<!--利用compoments属性-->

在这里插入图片描述
需要注意的是每个组件的数据应该封装为函数,是为了每个组件的data单独维护。如果你的组件需要新的数据使用props属性传递数据。

单文件组件

上面的组件模拟板内容很少如何组件中的内容多就很复杂,而且也不利于数据的传递,可以把文件模板的内容提取出来形成单文件组件。以.视图为后缀。

  1. 单文件组件模板
<template>

</template>

<script> export default {
       data:function(){
      } } </script>

<style scoped> </style>
<!--<template>标签就是组件的模板,里面是html内容, <script>标签就是js语法控制模板的行为,export default是ES6语法用于向外暴露该js文件, <style>样式语法,scoped控制样式作用范围(只在该组件生效)。 -->
//data要封装为一个函数,交予每个组件单独管理

显然和html页面类似,但是vue组件不能单独运行,需要依赖html页面,如上通过name标签调用。

  1. 将单文件组件引入html

如何将vue文件引入到html中呢?import可以吗?不可以,它只能识别js文件,如何用的wepack环境(一切皆模块)就可以,现在需要用官方工具vue-loader
vue组件:编写vue组件(my-component.vue)

//my-component.vue
<template>
	<div class="hello">Hello {
   {who}}</div>
</template>

<script> module.exports ={
       data: function() {
       return {
       who: 'world' } } } </script>

<style scoped> .hello {
       background-color: red; } </style>

html 文件:(index.html)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中引入vue单文件组件</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<!--单文件vue组件解析器-->
		<script src="https://unpkg.com/http-vue-loader"></script>
		
	</head>
	<body>
		<div id="my-app">
		  <my-component></my-component>
		</div>
		
		
		<script> new Vue({
       el: '#my-app', components: {
       'my-component': httpVueLoader('../componts/my-component.vue')//加载需要使用的vue文件 } }); </script>
		
	</body>
</html>

四个要点:

//引入官方vue-loader加载工具
<!--单文件vue组件解析器-->
<script src="https://unpkg.com/http-vue-loader"></script>
//当然vue.js别忘了
//导入组件的关键字httpVueLoader
httpVueLoader('../componts/my-component.vue')//加载需要使用的vue文件,括号内是相对路径
//注册组件
components: {
    
	'my-component': httpVueLoader('../componts/my-component.vue')//组件名+解析的组件
}
//后面用一个变量代替比较好
const Mycomponent=httpVueLoader('../componts/my-component.vue')
//调用组件
<my-component></my-component>  //组件注册时的命名,不是接收的命名

vue-loader的关键字是httpVueLoder(vue主键路径)也可以定义变量接收,在传递。
单文件组件没有el属性,会默认将模板的顶级顶级容器作为挂载元素,template中只能有一个顶级容器。

vue组件通信

实际开发中一般不使用HTML作为显示界面,而是使用一个顶级的vue组件作为显示界面。也就是将所有组件导入到一个根组件中,然后将根组件导入到HTML中。这样就会出现本地注册的组件数据无法传输的情况。 Vue组件通信解决了组件之间的数据传输问题。

  1. 父组件向子组件传值(自定义属性

不同父组件共用子组件时初始值都是一样的,那么如何在用子组件时,使用父组件的初始值呢?道具属性用于向子组件传值。

在子组件的道具中接收

<template>
	<div class="hello">Hello {
   {who}}</div>
</template>

<script> module.exports ={
       data: function() {
       return {
       who: 'world' } }, props:{
       init:'' } } </script>

<style scoped> .hello {
       background-color: red; } </style>

父组件通过属性名称传递

//引入和注册就省略了这里注册的组件名为Home
<Home init="Hello home"></Home>
//这里传递的是一个静态的字符串hello home,如果想要与父组件的数据绑定使用v-bind指令即可
<Home :init="str"></Home>

道具属性

//props三种定义方式
props:[‘massage’]
prop:{
    massage:String}   
props:{
    massage:{
    default:0,type:Number,required:true}}
default最终值,type数据类型,requird必填项校验[有这项就必须填值]
  1. vue子组件与父组件共享数据(自定义事件)

上面时父向子传值,那么如何在用子组件中与父组件共享数据呢?$发出方法用于向父组件传值。
子组件中定义事件

子组件中 $发出发送数据

<template>
	<div class="hello">Hello {
   {who}}</div>
</template>

<script> module.exports ={
       data: function() {
       return {
       who: 'world' } }, this.emit('method',this.who) //this表示vue实例 } </script>

<style scoped> .hello {
       background-color: red; } </style>

父组件中 @活动名称接收

<Home @method="getData()"></Home>   //用方法接收
...
{
	data:function(){
		son:''
	}
	methods:{
		getData(val){
			this.son=val    //参数接收的就是子组件的值(who)
		}
	}
}
  1. 任意组件之间的数据共享事件总线
    通过第三个中间枢纽组件进行传值,两个组件都引入这个组件,然后发送方 $.emit发送数据。

    接受方 $.on接受数据。

//创建eventBus.js的文件:

export default new Vue()

//one.vue:[发送方]
···
{
    
...
method1: function(){
    
	bus.$emit(‘share’,this.data)
}
}

//two.vue: [接收方]
...
{
    
...
created: function(var){
    
	bus.$on (‘share’,(var) =>{
        //ES6箭头函数,也可以写为普通函数
	this.data=val
})
}
}  //在vue生命周期内监听,这里时created
//接收方,并不知道数据什么时候发过来,所以要一致处理监听状态,写在vue生命周期函数中created()

vue生命周期与生命周期函数

生命周期函数时vue实例从创建----->运行------>销毁各个阶段所调用的函数。
在这里插入图片描述

动态组件

上面的组件在引用时就是名称标签引用,一旦写入就不能更改,动态组件就是,通过更改组件名动态显示不同的组件。
动态切换组件的显示与隐藏;vue内置 成分标签专门用来实现动态组件的渲染。并通过 属性控制,不同组件的切换。

<component is=”组件名”></component> 

上面这个也是静态的,已经写实了,通过将 v-绑定绑定,就可以实现动态切换了。
每次切换都是一个组件创建和销毁的过程,数据不会同步。。要想数据同步需要 活着标签

<keep-alive>
	<component :is=”组件名”></component>
</keep-alive>

使用keep-alive标签可以在切换过程中保持运行状态并隐藏它而不破坏它。

keep-alive也有生命周期和生命周期的功能。缓存时:停用和活动的生命周期函数。

包括属性指定那些组件可以被缓存,被移入keep-active包裹的都会缓存,排除与起相反。

<keep-active include=”One,Two”><component is=”组件名”></component></keep-active>

移入时仅缓存一和二组件,其他组件将被创建和销毁。

vue插槽

不管时通讯还是动态组件共享数据都是通过标签的属性来传递的标签内部没有任何内容,其实标签内部也可以传递数据。通过内部传递数据就是 vue 插槽

<Home>Hello</Home>
<Home><h1>Hello</h1></Home>

显然,这个内容只能被子组件接收。 Vue 允许开发人员在 Vue 组件中的任何位置预留空位,定义为槽位。引用时可以插入数据。

son.vue
//slot用于声明一个插槽
<slot name=”one”></slot> 

father.vue
//v-slot指定插入的位置
<One>
<template v-slot:one><h1>Hello World</h1></template>
</One>
//就会将<slot name=”one”></slot> 替换为<h1>Hello World</h1>

V型槽只能定义在 成分模板中所以要用template包裹。

slot标签中也可以自定义属性,用v-slot接收:
	<slot name=”one” message=”Hello”></slot>
	<template v-slot:one=”val”><h1>{
    {
    val}} </template>
val时自定义变量,为对象类型,val={
    message:”Hello”} 自定义的属性也可以用v-bind传递vue的数据。

vue实现DOM操作

在vue中由于数据的双向绑定和数据驱动视图的属性,使得不需要再操作DOM元素。若要操作DOM借助 参考属性。
vue自带 $参考文献属性用来操作DOM对象,再标签中加入ref=”name”,就为该标签添加标识并存储在vue内置对象

$参考文献中,通过this.refs.name获取DOM对象并用js语法操作它。

<div id=”app”>
	<h1 ref=”hello”>Hello World</h1>
</div>
vue实例中:
this.$refs.hello=<h1 ref=”hello”>Hello World</h1>   //即DOM元素
this.$refs.hello.style.color=”red”;

自定义vue属性

当某个方法或对象在vue中频繁使用时,可以将其注册为vue的属性。这样就可以通过调用而不用每次重写。

Vue.prototype.[Object || Function ]=Object || Function
//Jquery注册为全局使用,就不用每次都引入
Vue.prototype.jquery=$

vue路由

通过点击链接,监听url变化,并通过路径对应的组件动态切换组件。这样就实现了,页面的局部变化,不用加载整个页面,和动态组件类似。
动态组件子html的应用,需要官方路由工具 vue-路由器使用关键字 Vue路由器创建路由实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="../js/vue.js"></script>
    <!--单文件vue组件解析器-->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <!--vue路由-->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <!--引入ElemnetUI-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--导入axios-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style type="text/css"> .el-header {
       background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside {
       color: #333; } /* 为vue路由去除下划线 */ .router-link-active{
       text-decoration: none; } a{
       text-decoration: none; } </style>
</head>
<body>
<div id="app">

    <el-container style="height: 950px; border: 1px solid #eee">

        <!--左侧导航栏-->
        <el-aside width="240px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']" :unique-opened="true">

                <router-link to="/"><el-menu-item index="2" >
                    <i class="el-icon-menu"></i><span slot="title" style="width:60px">首页</span>
                </el-menu-item></router-link>

                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>关于我们</template>

                    <el-menu-item-group>
                        <router-link to="/profile"><el-menu-item index="2-1">公司简介</el-menu-item></router-link>
                        <router-link to="/culture"><el-menu-item index="2-2">企业文化</el-menu-item></router-link>
                        <router-link to="/honor"><el-menu-item index="2-3">荣誉资质</el-menu-item></router-link>
                        <router-link to="/development"><el-menu-item index="2-4">发展历程</el-menu-item></router-link>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>产品中心</template>
                    <el-menu-item-group>
                        <router-link to="/product"><el-menu-item index="3-1">产品管理</el-menu-item></router-link>
                        <router-link to="/productcount"><el-menu-item index="3-2">产品种类、材质、空间管理</el-menu-item></router-link>
                    </el-menu-item-group>
                </el-submenu>

                <router-link to="/new"><el-menu-item index="4">
                    <i class="el-icon-menu"></i><span slot="title">新闻、保养管理</span>
                </el-menu-item></router-link>

                <router-link to="/join"><el-menu-item index="5">
                    <i class="el-icon-menu"></i><span slot="title">加盟管理</span>
                </el-menu-item></router-link>

                <router-link to="/contact"><el-menu-item index="6">
                    <i class="el-icon-menu"></i><span slot="title">联系人管理</span>
                </el-menu-item></router-link>

                <router-link to="/comment"><el-menu-item index="7">
                    <i class="el-icon-menu"></i><span slot="title">留言管理</span>
                </el-menu-item></router-link>



            </el-menu>
        </el-aside>

        <!--中部内容显示区-->
        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <span style="float: left;font-size: 20px"><b>{
   {menu}}</b></span>
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>刷新</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span><b>bolen</b></span>
            </el-header>

            <el-main>
                <!--main-->
                <!--组件显示区-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>




</div>

<!--路由-->
<script> //导入各个组件,组件的内容就写出来了,按照模板来 const Display=httpVueLoader("../components/first.vue"); const Profile=httpVueLoader("../components/second.vue"); const Culture=httpVueLoader("../components/third.vue"); const Honor=httpVueLoader("../components/four.vue"); const Development=httpVueLoader("../components/five.vue"); const Product = httpVueLoader("../components/six.vue"); const ProductCount=httpVueLoader("../components/seven.vue"); const New=httpVueLoader("../components/eight.vue"); const Join=httpVueLoader("../components/night.vue"); const Contact=httpVueLoader("../components/ten.vue"); const Comment=httpVueLoader("../components/eleven.vue"); const routes = [ //设置路由映射,组件和uri地址的对应关系 {
       path: '/', component: Display }, {
       path: '/profile', component: Profile }, {
       path: '/culture', component: Culture }, {
       path: '/honor', component: Honor }, {
       path: '/development', component: Development }, {
       path: '/product', component: Product }, {
       path: '/productcount', component: ProductCount }, {
       path: '/new', component: New }, {
       path: '/join', component: Join }, {
       path: '/contact', component: Contact }, {
       path: '/comment', component: Comment }, ] const router = new VueRouter({
       //VueRouter关键字创建路由实例 routes }) new Vue({
       el:'#app', router, //将路由实例挂载到vue实例,(交由vue管控) data:{
       menu:'欢迎!', }, //监听路由变化 watch:{
       $route(to){
       //vue内置$route方法获取url地址 //console.log(to.path); if (to.path ==='/'){
       this.menu='首页' } } } }); </script>

</body>
</html>

五个要点

  • 导入 vue-router
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<!--vue.js和vue-loader别忘了-->
  • VueRouter 创建路由实例
const routes=[
	{
    path:'',cpmponent:'',redirect:''}  //redirect是重定位,需要就写,不需要不写
]
 const router = new VueRouter({
        //VueRouter关键字创建路由实例
        routes
    })

//path是地址,component是组件名称,routes是一个列表,将映射注册到路由时用{}包裹。
  • 将路由实例注册到vue实例中
 new Vue({
    
        el:'#app',
        router,        //将路由实例挂载到vue实例,(交由vue管控)
    });
  • 指定的内容添加路由链接路由器链路 并用 指定路由地址
  <router-link to="/product">
  	<el-menu-item index="3-1">产品管理</el-menu-item>
  </router-link>
  //关键字<router-link>标签,to指定地址
  • 路由器视图指定显示区域
<el-main>
    <!--main-->
    <!--组件显示区-->
    <router-view></router-view>
</el-main>
//所有组件都会在router-view中显示和切换

路由嵌套子项(禁止套娃。。。直接上代码)

cosnt routes=[
	{
    
		path:/home’,
		component:’Home’,
		children:[        //children属性声明子组件路由
			{
    path:’xxx’,component:’’}    //内部对象映射子组件的路由规则,path路径前没有/
	]   //children和routes一样是数组,
	
	}
]
//关键字children

动态路由匹配

router-link 相当于 a 标签。让我们看一个小例子:

在这里插入图片描述
路由标签只是改变了地址栏,a标签也可以做到,a标签是可以传递参数的,路由标签也可以。

<a href="#/home?name=xxx&password=xxx">传参</a>
<a href="#/home/1">传参</a>
<router-link to="/home?name=xxx"></router-link>
<router-link to="/home/1"></router-link>

路由映射在定义是要与to的内容一样,但是如果路由定义为静态的话就没有多大意义,动态路由中通过 - 把可变的部分定义为参数,并通过 $路线(路由对象)接收,以提高复用性。【意外打出个撅嘴,好神奇不想删了,英文的冒号加星号】它表示 : 。

{
    path:/page/:count’,component:’Home’}  
//这个不管穿过来的什么都可以赋值给count
//在通过$route的vue内置路由对象就可以获取值了

$路线的结构如下:
在这里插入图片描述
获取这个对象再获取小路的值就可以了,上面是通过 /价值的方式传值,如果用 ?键=值&键1=值1 的方式呢?
$route还有query对象用它获取。具体就不说了,用console打印一下就看出来了。

vue-cli

重新开发过程中,并不清楚上面的内容该写在哪里,vue单文件组件应该写在哪个目录,如何在组件中导入组件,写完之后如何打包发布等等。 -cli 与 webpack 结合,形成 vue 开发的标准化工具。只需要几个简单的命令就可以构建一个工程项目,让开发者只需要专注于开发,而不必考虑如何构建项目和导入模块。

docs命令操作:
在这里插入图片描述

  • 安装node配置环境变量
    node -v || npm -v 查看是否配置成功。
  • 安装vue-cli
    Vue-cli是全局包,使用npm install -g @vue-cli命令安装到自己电脑上(一次安装之后都可以使用)
  • 基于vue-cli创建工程化项目
    vue create 项目名称
    在这里插入图片描述
    node_modules第三方方包额文件夹,public是外部可以访问的文件夹,里面的index.html就是spa入口程序。Src源代码目录,.gitignore是发布git的忽略配置文件,package-lock.json记录第三方包在包项目的位置,便于引入,package.json记录项目的信息,用来那些包,版本,管理开发包,生产包,命令等。

src源码目录
在这里插入图片描述
assets存放静态资源的文件夹,如css样式文件,图片资源等;components是vue组件存放目录;main.js是项目的入口文件(相当于webpack的entry的index.js)App.vue是项目的根组件,展示组件(展示部分并不是写在index.html中,它只是将App.vue引入[vue组件不能单独运行,须嵌入html中],就是html页面写展示的逻辑,只引入根vue,自定义vue组件时,导入根vue[App.vue]就可以了)

  • npm run 项目名
    该命令运行项目,先docs命令切换到该目录下。

  • vue build 项目名
    写完后打包发布,产生dist目录,所需文件。

  • vue ui 可视化操作
    在这里插入图片描述

. . .

相关推荐

额外说明

如何使用django+uwsgi+nginx和ssl证书部署我们的后端项目

如何使用django+uwsgi+nginx以及ssl证书部署我们的后端项目(保姆级教程!) 一、前提条件: 有一台服务器,阿里云或者腾讯云等等 有一个自己的域名 服务器绑定了域名(这个很简单网上教程一堆,因为博主太穷不可能重整个服务器出教程所以就从这里

额外说明

【JavaEE】线程的创建及常见方法解析(Tread类)

目录 1.Tread类介绍 2线程的构造方法——创建线程 1.继承Thread类,重写run()方法 2.使用Runnbable接口创建线程 3.继承 Thread, 重写 run, 使用匿名内部类 4.实现 Runnable, 重写 run, 使用匿名

额外说明

【STM32】基础知识 第十二课 GPIO

【STM32】基础知识 第十二课 GPIO 概述 GPIO 简介 GPIO 模式 GPIO 特点 GPIO 配置 GPIO 操作 施密特触发器 案例 概述 本文小白我将来介绍通用输入与输出, GPIO (General-Purpose Input/Out

额外说明

云计算环境中高性能计算的挑战与对策

文章目录 云计算中的高性能计算挑战 1. 资源竞争: 2. 网络延迟: 3. 数据传输效率: 4. 虚拟化开销: 5. 节点异构性: 高性能计算在云计算环境中的对策 1. 定制化虚拟机镜像: 2. 弹性资源调整: 3. 高效数据传输: 4. 任务并行度:

额外说明

【C++ STL基础入门】初识STL

文章目录 前言 一、STL是什么? 1.STL概念 2.容器是什么? 3.STL的优势 二、将会学习到的stl和算法 1.将会学到的容器 2.算法 3.字符串 基础字符串 字符串视图(basic_string_view) 总结 前言 本系列STL是以VS

额外说明

Onvif发现设备工具类

 每分钟refreshDevice方法会将局域网内的设备更新到deviceSet集合中,controller层随用随取。 import be.teletask.onvif.DiscoveryManager; import be.teletask.onvi

额外说明

Teamcenter Web 端自动登录 (SSO)

原生的机制 Teamcenter 2007 的web 端, 本身提供了SSO 的机制。 原生的机制使用 Java Applet 的方式获取浏览器端所在的机器登录的用户名,使用这个用户名进行登录, 而无需密码。 架构设计如下: 不需要安装插件的验证 使用以

额外说明

《Cesium 基础知识点》- WMTS 调用

1、添加 天地图配置 // vec(矢量)、img(影像)、cia(影像中文注记)、cva(矢量中文注记) let mapType = 'img'; // 注意:_w 使用球面墨卡托,_c 无效 // 旧后缀 tianditu.com,不支持 https

额外说明

ROS从入门到精通2-6:Rviz可视化进阶(画坐标轴、直线、平面、圆柱等)

目录 0 专栏介绍 1 Rviz可视化 2 环境配置 3 使用方法 4 测试用例 0 专栏介绍 本专栏旨在通过对ROS的系统学习,掌握ROS底层基本分布式原理,并具有机器人建模和应用ROS进行实际项目的开发和调试的工程能力。 -详情:《ROS从入门到精通

额外说明

如何将WordPress网站置于维护模式

您想将您的 WordPress 网站置于维护模式吗?维护模式允许您在网站维护期间向用户显示用户友好的通知,而不是损坏的网站。 您想将您的 WordPress 网站置于维护模式吗?维护模式允许您在网站维护期间向用户显示用户友好的通知,而不是显示损坏的网站。

ads via 小工具