vue基础教程

VUE

1、基础篇

1.1、初识Vue

准备
VsCode 插件

Vetur

、

Prettier-Code formatter

浏览器工具

vuejs devtool

vue基础

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>01-初识vue.html</title><!-- 0、导入vue.js --><scriptsrc="../js/vue.js"></script></head><body><!-- 1、定义一个容器 --><divid="app"><h3> 第一个vue程序，并使用插值表达式取得值为：{{name}} </h3></div></body><script>// 去除浏览器控制台中的错误信息  可以尝试去掉这个，然后进入浏览器控制台，观察上面报的东西
    Vue.config.productionTip =false;// 2、初始化Vue容器newVue({el:"#app",data:{name:"紫邪情",age:"18"}})</script></html>

Vue容器中的代码一样符合html规范，只不过是混入了一些Vue的特殊用法而已，这个容器中的代码被称为：Vue模板
{{xxx}}中的xxx要写js表达式（ {{}} 即为插值表达式），且xxx可以自动读取到data中的所有属性
一旦data中的数据发生改变，那么页面中使用该数据的地方一样发生改变

1.2、认识v-bind - 数据单向绑定

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>02-vue之v-bind</title><scriptsrc="../js/vue.js"></script></head><body><divid="app"><!-- 常规写法：v-bind绑定的是属性 --><av-bind:href="url"></a><!-- 多层嵌套取值：插值表达式   取的东西就是下面Vue实例new Vue({})
                 data中的东西，可以理解为在找寻集合中的元素
             --><h3>{{person.name}}</h3><!-- 简写 --><h3:mySex="person.sex">{{person.name}}</h3></div></body><script>
 
     Vue.config.productionTip =false;newVue({el:"#app",// el指定的是为哪一个容器服务  值就是一个css中的选择器data:{// data存储的就是数据，这些数据是供el指定的容器去用的url:"https://www.cnblogs.com/xiegongzi/",person:{name:"紫邪情",sex:"女"}}})</script></html>

小结：Vue模板有两大类

1、插值语法，前面已经见到了，就是：{{ 取data中保存的数据 }} - 功能：解析标签体的内容- 注意：{{}}中的东西必须是js表达式
2、指令语法 - 功能：解析标签（包括属性、标签体内容、绑定事件… )- 例子： v-bind:herf = “xxxx” 或简写为 :herf = “xxxx” 注意：xxx同样要写成js表达式- 另外：Vue中有很多指令语法，形式都是： v-xxxx 如：v-bind、v-model、v-if、v-for、v-on…，而且一些指令也都可以简写

1.3、认识Vue的数据绑定

这里需要了解m

vvm

模式，要理解，可以参照

java

中的

mvc

模式

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>03-v-model</title><scriptsrc="../js/vue.js"></script></head><body><divid="app"><!-- 单向绑定：绑的是属性 -->
         单向绑定：<inputtype="text":value="name"><br/><!-- 双向绑定：绑的是值 -->
         双向绑定：<inputtype="text":myName="name"v-model:value="username"><br/><!-- 双向绑定的简写 因为：model绑的就是值，因此：value可以省掉 -->
         双向绑定：<inputtype="text":myName="name"v-model="username"></div></body><script>
 
     Vue.config.productionTip =false;newVue({el:"#app",data:{name:"紫邪情",username:"邪公子"}})</script></html>

数据绑定小结：Vue中数据绑定有两种方式

1、单向绑定（ v-bind ），数据只能从data流向页面
2、双向绑定（ v-model ），数据不仅能从data流向页面，还可以从页面流向data，但需注意如下两点 - 双向绑定一般都应用在表单类元素上（如：input、select等）- v-model：value 可以简写为 v-model，因为：v-model默认收集的就是值

1.4、el和data的两种写法

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>04-vue的el和data的两种写法</title></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"></div><script>// 创建 vm 实例对象const vm =newVue({//指定控制的区域// el:'#app',   // el 常规写法// data:{},     // data 常规写法 ———— 这种也叫对象式写法// data 函数式写法，这种写法后续经常见data(){// 这里使用data：function(){}也可以，但是：绝对不能写成data:()=>{}// 因为这种写法变质了，成为Window对象了，这样后续用this指向时，这个this所指代的就不Vue实例了return{}}});// el 另外的写法
        vm.this.$mount('#app')// 这种写法需要记住，后续组件化开发需要用到</script></body></html>

小结：el和data的两种写法

1、el - （1）、new Vue时配置el选项- （2）、先创建Vue实例，然后再通过vm.this.$mount( ‘#app’ ) 来指定el的值
2、data - （1）、对象式- （2）、函数式- 如何选择哪种用法：目前都可以，但是后续会玩组件，则：必须用函数式，而且不可以用兰姆达表达式（即：上面的data:()=>{}，否则：会出错）
3、一个原则： - 由Vue管理的函数，一定不要写箭头函数，就上面的兰姆达表达式，否则就会导致this不再是Vue实例了（这个this有大用处，在"new Vue中"用了this就是指的当前的Vue实例，后续可以通过这个this玩很多东西）

1.5、理解MVVM模型

M 指：model
V 指：view
VM 指：viewmodel

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>理解MVVM</title><scriptsrc="../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>姓名:{{name}}</h2><br><h2>性别:{{sex}}</h2><hr><h2>智商:{{1+1}}</h2></div><script>// 创建 vm 实例对象const vm =newVue({//指定控制的区域el:'#app',data:{name:"紫邪情",sex:"女"},});
 
        console.log( vm );</script></body></html>

小结：MVVM模型

1、M：Model（模型） ————> data中的数据
2、V：View（视图） —————> 模板代码
3、ViewModel：视图模型（ ViewModel ） ————> Vue实例

1.6、回顾Object.defineProperty()函数

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>05-了解object.defineProperty()</title><scriptsrc="../js/vue.js"></script></head><body><script>
 
       Vue.config.productionTip=false;let sex ='女'let person ={name:'紫邪情'}//  参数说明：person 为要修改的对象  sex为具体修改的对象中的哪个属性  {} 对修改属性的配置
        Object.defineProperty( person ,'sex',{//  以下就是{}中的相关配置//  value: '男',//  enumerable: true,    // 这个sex是否可以被遍历//  writable: true,      // 这个sex是否可以被修改//  configurable: true,   // 这个sex是否可以被删除// 当有人获取sex这个属性时会触发这个get()方法get(){
             console.log('有人读取sex属性了');return sex;},// 当有人修改sex属性的值时会触发这个set方法set(value){
             console.log('有人修改了sex的值');return sex = value;}});</script></body></html>

注意：去找temp或者值是调用了get()方法进行获取的，相应的set()方法也知道是怎么回事了

1.7、简单理解数据代理原理

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>06-简单理解数据代理</title></head><body><script>let obj1 ={x:100};let obj2 ={y:200};// 数据代理： 通过一个对象代理 对 另一个对象中属性的操作（ 读 / 写 ）
         Object.defineProperty(obj2 ,'x',{get(){
             console.log("有人获取了x的值");return obj1.x;},set(value){
             console.log("有人修改了x的值");
             obj1.x = value;}})</script></body></html>

小结：Vue中的数据代理

1 、通过vm对象来代理data对象中的属性的操作（读 / 写）
2、好处：更加方便操作data中的数据
3、原理： - 通过object.defineProperty()把data对象中所有属性添加到vm上- 为每一个添加到vm上的属性，都指定一个 getter / setter- 在getter / setter内部去操作（读 / 写）data中的属性

1.8、事件绑定及其修饰符

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>07-事件绑定及其修饰符</title><scriptsrc="../js/vue.js"></script></head><!-- 
         常用的事件修饰: 事件、事件，放在对应事件后就可以了，如：@click.prevent = "xxxx"
             prevent     表示：阻止默认事件的触发
             stop        表示：阻止事件冒泡
             once        表示：只执行一次事件
 
    --><body><!-- 被 vm 实例所控制的区域 --><divid="app"><!-- vue中事件绑定的简单写法 --><buttonv-on:click="showInfo()">点我显示提示信息</button><br/><!-- vue中事件绑定的简写 还可以传递参数 --><button@click="showInfo2($event, 66)">点我获取带参的事件信息</button></div><script>
 
         Vue.config.productionTip=false;// 创建 vm 实例对象const vm =newVue({//指定控制的区域el:'#app',data:{},methods:{showInfo(){alert("这是vue中的事件绑定");},showInfo2(event , number){
                 console.log(event +"=====>"+ number);}}});</script></body></html>

小结事件的使用

1、使用v-on:xxxx，或 @xxx 来绑定事件，xxxx就是事件名
2、事件的回调需要配置在methods对象中，最终会在vm上
3、methods中配置的函数，记得不要用兰姆达函数啊（前面说过的），否则this无效了
4、methods中配置的函数，都是被Vue所管理的函数，this指向的就是vm 或组件实例对象
5、@click = “demo” 和 @click = “demo( $event )效果一致，但是：后者可以传参（后续有用）

1.9、计算属性

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>10-计算属性conputed</title><scriptsrc="../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app">
         姓名: <inputtype="text"v-model="name"><br/>
         性别: <inputtype="text"v-model="sex"><hr>
         信息: <span>{{info}}</span></div><script>
 
     Vue.config.productionTip=false;// 创建 vm 实例对象const vm =newVue({//指定控制的区域el:'#app',data:{name:'紫邪情',sex:'女'},// 所谓的计算属性：就是通过已有属性（ 一般为data中的 ）计算得来computed:{info:{get(){
                     console.log('开始调用get()');returnthis.name +'-'+this.sex
                 },set(value){
                     console.log('开始调用set()'+ value);// 计算属性要被修改，那必须写set()去响应修改，且set()中要引起计算时依赖的数据发生改变const arr = value.split('-');this.name = arr[0];this.set = arr[1];}}}});</script></body></html>

计算属性小结

1、定义：要用的属性不存在，要通过已有属性计算得来
2、原理：借助了object.defineproperty()的getter和setter
3、get()什么时候执行- 1、初次读取时会执行一次- 2、当依赖的数据发生改变时会再次被调用
4、优势：与methods相比，内部有缓存机制（复用），效率更高、调试方便
5、注意：- 1、计算属性最终都会在vm（ Vue实例）上，直接读取即可- 2、若计算属性要被修改，那必须写set()去响应修改，且set()中要引起计算时依赖的数据发生改变（例子中没有做这一步）
6、计算属性是可以简写的就是把set()去掉，因为：更多时候是读取，并不修改，同时修改还要去控制台（刷新就又没了），因此：把set()去掉就是计算属性的简写

1.9.1、结合computed、methods、v-on做一个小Demo

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>11 - 使用计算属性做一个Demo</title><scriptsrc="../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>你是:{{result}}</h2><button@click="changeResult">切换名字</button></div><script>// 去除浏览器控制台中的错误信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({//指定控制的区域el:'#app',data:{name:true},computed:{result(){returnthis.name?'紫邪情':'紫女'}},methods:{changeResult(){returnthis.name =!this.name
             }},});</script></body></html>

我们主要做的是图中的这一步，因此：简化 ———— 衍生出v-on的另外一个玩法

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>12 - 使用计算属性做一个Demo 简化</title><scriptsrc="../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>你是:{{result}}</h2><!-- @xxx = 'yyyy' 如果只是做一件简单的事情，那么就可以使用下面的方式
               因为：v-on是可以支持js表达式的（ 注意：不是js代码啊 ）
               但是：如果这个v-on需要做多件事，那么最好就别这么玩
                     如：切换了名字，还要弄一个弹窗（ 切换成功 ）这种就别玩
         --><button@click="name = !name">切换名字</button></div><script>// 去除浏览器控制台中的错误信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({//指定控制的区域el:'#app',data:{name:true},computed:{result(){returnthis.name?'紫邪情':'紫女'}},// methods: {//     changeResult(){//         return this.name = !this.name//     }// },});</script></body></html>

1.10、监视属性

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>13 - 监视属性 watch</title><scriptsrc="../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>你是:{{result}}</h2><button@click="name = !name">切换名字</button></div><script>// 去除浏览器控制台中的错误信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({//指定控制的区域el:'#app',data:{name:true},computed:{result(){returnthis.name?'紫邪情':'紫女'}},// 监视属性 watch  监视的是属性，也就是data中和computed中的都可以监视// 现在这种我是用的简写形式 ———— 前提是：只需要使用handler()中的东西时，handler后续会用完整形式watch:{name(newValue, oldVaule){// 表示的是：监视哪个属性
                 console.log('属性发生变化了', newValue , oldVaule);}},});//    当然：监视属性还有一种写法，就是利用Vue的内置函数/*     vm.$watch( 'name', {  // 这里的name就是指监听哪个属性  而且必须是' '引起来的
         handler( newValue, oldVaule ){
             console.log('属性发生变化了' , newValue , oldVaule);
         }
      }) */</script></body></html>

监视属性 watch小结

1、当被监视的属性变化时，回调函数自动调用，进行相关操作回调函数：指的是：handler() ，第一种写法也是可以用handler，只是把watch换成了$watch而已，后面步骤其实是一样的，只是我把第一种给简写了而已
2、监视的属性必须存在，才能进行监视
3、监视有两种写法- （1）、new Vue时传入watch配置- （2）、通过vm.$watch内置函数进行监视

1.10.1、深度监视 - 需要掌握的一种

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>14 - 深度监视</title><scriptsrc="../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>你是:{{result}}</h2><!-- 现在这个name就是person里面的了，这就是需要监视多层属性变化 --><button@click="person.name = !person.name">切换名字</button></div><script>// 去除浏览器控制台中的错误信息
     Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({//指定控制的区域el:'#app',data:{person:{name:true}},computed:{result(){returnthis.person.name?'紫邪情':'紫女'}},// 下面这种事监视属性的完整写法，前面玩的一个是简写形式watch:{person:{// 监视多层结构中所有属性的变化deep:true,// 深度监视 就做了这一步操作而已/* 
               Vue中watch默认是不可以监视属性更里层的，
               如：上面person只可以监视person本身这个属性，理解的话，
               可以采用对象空间值来比对，假如：person空间地址是是01x23，
               那么Vue只会监视这个空间变量有没有发生改变，而内层就不可以监视，
               因为：内层中的属性改变了，但是person这个对象本身并没有改变
            */handler(){
                   console.log('属性改变了');}}}});</script></body></html>

深度监视小结

1、Vue中的watch默认不监视对象内部值得改变（监视的是一层）
2、配置deep:true可以监视对象内部值得改变（监视多层）
注意： - 1、Vue自身可以监视对象内部值得改变，但Vue提供的watch默认不可以这个可以验证的，使用多层属性，最后是绑定在vm上的，那么在控制台使用vm去改变值，那么页面再去观察页面就可以发现效果了，这里是为了解释Vue不是不可以监视多层的改变，只是：watch默认不支持- 2、使用watch时根据数据的具体结构（属性是一层还是多层嘛），决定是否采用深度监视

1.11、computed和watch的坑

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>15 - computed和watch的坑</title><scriptsrc="../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app">
         姓: <inputtype="text"v-model="firstname"><br/>
         名: <inputtype="text"v-model="lastname"><hr/>
 
         信息: {{fullname}}
     </div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({//指定控制的区域el:'#app',data:{firstname:'紫',lastname:'邪情',fullname:'紫邪情'},watch:{firstname(val){this.fullname = val +this.lastname;},lastname(val){this.fullname =this.firstname + val;}}});</script></body></html>

用computed实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>02 - computed实现</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app">
             姓: <inputtype="text"v-model="firstname"><br/>
             名: <inputtype="text"v-model="lastname"><hr/>
 
             信息: {{fullname}}
         </div><script>// 去除浏览器控制台中的警告提示信息
           Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({//指定控制的区域el:'#app',data:{firstname:'紫',lastname:'邪情'},computed:{fullname(){returnthis.firstname +this.lastname;}}});</script></body></html>

最后运行的效果都是一样的，但是：虽然看起来没区别，可是computed和watch还是有区别的，假如：现在我需要让姓改了之后，隔1s之后再显示到信息那里。那么：computed无法做到，但是watch就可以

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>03 - 用watch实现异步操作</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app">
         姓: <inputtype="text"v-model="firstname"><br/>
         名: <inputtype="text"v-model="lastname"><hr/>
 
         信息: {{fullname}}
     </div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{firstname:'紫',lastname:'邪情',fullname:'紫邪情'},watch:{firstname(val){// 一定需要注意：这里必须使用兰姆达表达式() =>{}/* 
                     前面说过，Vue所管理的函数，切记别用兰姆达表达式，智能用函数式
                             这是为了能够通过this拿到vm实例的东西而已
                     但是注意：这里这个setTimeout()定时函数是Vue所管理的吗？
                             不是，而后面需要的val是哪里的？是Vue实例中的，修改的值
                             是在Vue实例身上
                             所以：想要拿到Vue身上的val怎么弄？页面的展示都是js引擎帮忙去进行操作 / 找寻的
                             因此：利用js引擎做文章，让它找的时候自动去层级查找，它执行到里面的this.fullname = val + this.lastname时
                             会去找this是谁,()=>{}这里是用的兰姆达表达式，这就会指向Window对象，而Window上没有fullname，所以就会
                             往外找，找到firstname(val)这是函数式，指向的就是Vue实例，也就找到了fullname、val.....
                 */setTimeout(()=>{this.fullname = val +this.lastname;},1000);},lastname(val){this.fullname =this.firstname + val;}}});</script></body></html>

而利用computed就不可以做到上面的这种异步操作
computed和watch的区别

1、computed能完成的功能，watch绝对都可以做到
2、watch能完成的功能，computed不一定可以做到，如：上面举的例子进行异步操作
3、原则： - 1、凡是被Vue所管理的函数，最好都写成函数式（即：普通函数），这是为了能够让this指向Vue实例或组件实例对象（后续会见到），这样就可以通过this拿到它们对应的东西- 2、凡是不被Vue所管理的函数（如：定时器里面的回调函数、ajax中的回调函数… )，最好都写成兰姆达表达式（即：箭头函数），这样做也是为了能够让this指向Vue实例或组件实例对象

1.12 样式绑定

1.12.1、class样式绑定

class样式绑定小结

1、字符串写法，适用于：class名字不确定时使用
2、数组写法，适用于：class名字、个数都不确定时使用
3、对象写法，适用于：class名字确定、但个数不确定（如：例子中的login1可能用，可能不用，而login2也是一样，所以这就是各种组合）

1.12.2、style行内样式绑定

class和style样式绑定小结

1、class样式绑定- 写法：class = “xxxx”，其中xxxx可以使字符串、数组、对象- 字符串写法适用于：类名不确定、要动态获取（交由Vue管理，随时调试）- 数组写法：要绑定多个样式、class名字和个数都不确定- 对象写法：要绑定多个样式、class名字确定而个数不确定（个数不确定是因为不知道某个样式用不用）
2、style样式绑定- 写法：style = “xxx"，其中xxx可以是对象、数组对象写法是推荐用的一种
3、原则- 在Vue中静态不变的东西，就放在Vue模板中即可（即：那个div容器中），而动态改变的东西就放在Vue实例身上

1.13 条件渲染

1.13.1、v-if

注意：
v-if、v-else-if、v-else组合用时，需要留意代码是紧挨着的即可，这就好比：java的Mybatis框架的pageHelper分页插件，用startPage和pageInfo联合使用一样（数据查询完了之后放到pageInfo<>()中，这二者中间就不可以夹杂另外的语句，否则报错）

1.13.2、v-if配套工具template

注意事项：template“只能”与v-if搭配使用

1.13.3、v-show

1、v-if会了，那么v-show就会了，用法和单纯的v-if一模一样
2、不过它和v-if的原理不一样

v-if和v-show小结

1、v-if- （1）、v-if = “表达式”- （2）、v-else-if = “表达式”- （3）、v-else = “表达式”- （4）、适用于：切换频率较低的场景，因为：v-if是直接把不展示的DOM元素给移除掉- （5）、特点：不展示的DOM直接移除- （6）、注意：v-if可以和v-else-if、v-else一起使用，但是：要求结构不可以被“打断”（代码紧挨着）
2、v-show- （1）、v-show = “表达式”- （2）、适用于：切换频率较高的场景- （3）、特点：不展示的DOM元素未被移除，仅仅是使用display:none样式给隐藏掉了而已
3、注意：使用v-if时，元素可能无法获取到，而使用v-show，则：一定可以获取到因为：v-show是做了样式修改，但是DOM节点还在，所以是可以操作这个DOM节点的，但是：v-if是直接把DOM元素给移除掉了（万一是误操作而导致把v-if的值弄为false了，那后续万一其他地方用到了v-if移除的节点呢？不就裂开了吗）

1.14 循环结构

1.14.1、v-for

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>1 - 认识v-for</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><!-- 1、遍历数组 --><h2>人员信息</h2><!-- 简写形式 --><ul><liv-for="p in persons":key="p.id">
                 {{p.name}} ----- {{p.age}}
             </li><!-- 
                 v-for就和js中的for in差不多
                 :key="p.id"  此处：是给每一个li节点绑定一个唯一的id（ 和身份证号一样 就相当于是<li id = ‘xxx’> ），此时不写没事，但是最好都带上，后续有用
                 p  代表的就是：从persons中遍历出来的每一条数据
              --></ul><!-- 完整写法 --><ul><liv-for="(val,index) in persons":key="val.id">
                 {{val.name}} ----- {{val.age}} ------ {{index}}
             </li></ul><!-- 2、遍历对象 --><h2>神奇之地</h2><ul><liv-for="(val,index) in like":key="index">
                 {{val}} ------ {{index}}
             </li></ul><!-- 其实另外还有：v-for还可以遍历字符串、某个数字（ 循环这个数字这么多次 ），但是这两种基本上都不用，所以不说明了 --></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{persons:[// 数组中又放得有对象{'id':'10001','name':'紫邪情','age':'18'},{'id':'10002','name':'紫女','age':'18'},{'id':'10003','name':'邪公子','age':'19'}],like:{name:'香牌坊',ko:'范冰冰'}},});</script></body></html>

v-for小结

1、语法：v-for = “ （ item，index ） in xxx ” :key = “yyy”
2、可遍历：数组、对象、字符串（用得少）、指定次数（用得更少）
3、可用于：展示列表数据

1.14.2、key值的坑（作用与原理）

在前面v-for中key值使用index时有一些坑的，正确的做法是：最好使用数据的id作为key值，但不是说index作为key值就是错的，前面演示过了，是正常效果，可是：在特定的场景下使用 :key = "index"就会出问题

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>2 - key值的坑</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>人员信息</h2><ul><!-- 这里使用index作为key值 --><liv-for=" (p , index) in persons":key="index">
                 {{p.name}} ----- {{p.age}} <inputtype="text"></li></ul></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{persons:[{'id':'001','name':'张三','age':'18'},{'id':'002','name':'李四','age':'19'},{'id':'003','name':'王五','age':'20'}]},});</script></body></html>

小结

1、虚拟DOM中key的作用 key是虚拟DOM对象的标识，当状态中的数据发生改变时，Vue会根据【新数据】生成【新的虚拟DOM 】随后Vue进行【新虚拟DOM 】与【旧虚拟DOM 】的差异比较（对比算法 / diff算法）
2、对比算法的规则- （1）、旧虚拟DOM中找到了与新虚拟DOM相同的key 若虚拟DOM中内容没变，则：直接使用之前的真实DOM 若虚拟DOM中内容变了，则：生成新的真实DOM，随后替换掉页面中之前的真实DOM- （2）、旧虚拟DOM中未找到与新虚拟DOM相同的key 直接创建新的真实DOM，虽然渲染到页面
3、用index作为key值可能会引发的问题- （1）、若对数据进行：逆序添加、逆序删除…等破坏数据顺序的操作则：会产生不必要的真实DOM更新即：界面显示没问题，但：效率低（效率低是因为：最后生成真实DOM时，文本节点是重新生成的）- （2）、若结构中还包含输入类（如：例子中的input ）的DOM 则：会产生错误DOM更新即：页面中数据错位
4、开发中如何选择key？- （1）、最好使用数据自己的唯一标识作为key值，比如：手机号、身份证号…( 直接利用数据库中的主键id也行 )- （2）、如果不存在对数据逆序添加、逆序删除等破坏数据顺序的操作，只用来渲染列表页面，则：使用index作为key是莫问题的

1.14.3、列表过滤

1、使用watch实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>3 - 列表过滤（ 查询功能 ）</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><H2>人员信息列表</H2>
 
         搜索:<inputtype="text"placeholder="请输入搜索词"v-model="keyWord"><ul><liv-for=" p in filterPersons":key="p.id">
                 {{p.name}} -------- {{p.age}}
             </li></ul></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{// 1、搜集搜索框中的内容 搜索框内容变，这里的内容也要变，所以：双向绑定v-modelkeyWord:'',// 2、准备初始数据persons:[{'id':'10001','name':'紫邪情','age':'18'},{'id':'10002','name':'紫邪晴','age':'19'},{'id':'10003','name':'邪公子','age':'20'},{'id':'10004','name':'公孙策','age':'21'},{'id':'10005','name':'孙悟空','age':'22'}],// 4、需要准备另一个容器来装过滤之后的数据filterPersons:[]},// 3、使用watch来实现搜索效果/* 
             需要做两件事
                 （1）、拿到data的keyWord中的内容
                 （2）、使用keyWod中的内容 去 persons中进行过滤筛选，从而把结果渲染到页面
         */watch:{keyWord:{// 这个的作用：页面初始化时就执行一次handler()immediate:true,handler(newVal){// 1）、过滤数据 把结果放到filterPersons中去this.filterPersons =this.persons.filter((p)=>{// 没在数组中indexOf()返回的就是-1return p.name.indexOf(newVal)!==-1})}}}});</script></body></html>

2、使用computed实现

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>3 - 列表过滤（ 查询功能 ）</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><H2>人员信息列表</H2>
 
         搜索:<inputtype="text"placeholder="请输入搜索词"v-model="keyWord"><ul><liv-for=" p in filterPersons":key="p.id">
                 {{p.name}} -------- {{p.age}}
             </li></ul></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{// 1、搜集搜索框中的内容 搜索框内容变，这里的内容也要变，所以：双向绑定v-modelkeyWord:'',// 2、准备初始数据persons:[{'id':'10001','name':'紫邪情','age':'18'},{'id':'10002','name':'紫邪晴','age':'19'},{'id':'10003','name':'邪公子','age':'20'},{'id':'10004','name':'公孙策','age':'21'},{'id':'10005','name':'孙悟空','age':'22'}],},// 3、使用computed来实现搜索效果/* 
             需要做两件事
                 （1）、拿到data的keyWord中的内容
                 （2）、使用keyWod中的内容 去 persons中进行过滤筛选，从而把结果渲染到页面
         */computed:{filterPersons(){returnthis.persons.filter((p)=>{return p.name.indexOf(this.keyWord )!==-1})}}});</script></body></html>

1.14.4、列表排序

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>4 - 列表排序</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>人员信息</h2>
         搜索: <inputtype="text"v-model="keyWoed"placeholder="请输入关键字"><button@click="sortType = 1">升序</button><button@click="sortType = 2">降序</button><button@click="sortType = 0">原顺序</button><ul><liv-for=" p in filterPersons":key="p.id">
                 {{p.name}} ----- {{p.age}}
             </li></ul></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{keyWoed:'',sortType:0,persons:[{'id':'10001','name':'紫邪情','age':'18'},{'id':'10002','name':'紫邪晴','age':'14'},{'id':'10003','name':'邪公子','age':'121'},{'id':'10004','name':'公孙策','age':'21'},{'id':'10005','name':'孙悟空','age':'42'}]},computed:{filterPersons(){/* 
                     排序：就是将列表过滤之后的数据 根据特定字段排序之后，再渲染到页面中即可
 
                     因此：return this.persons.filter这里不能直接用return，不然就直接把过滤的数据渲染到页面了
                     所以：再对这一步做一下排序操作
                 */// 先用个数组装起来const arr =this.persons.filter((p)=>{return p.name.indexOf(this.keyWoed )!==-1;})// 然后对数组进行排序操作,但是得先知道用户是点击的哪个按钮（ sortType ）if(this.sortType){
                     arr.sort((previous,last)=>{returnthis.sortType ==1? previous.age - last.age : last.age - previous.age;})}return arr;}}});</script></body></html>

1.15、Vue监视数据的原理

1.15.1、监视数据失效实例

正常版

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>1 - 监视数据失效实例</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>Vue监视数据失效问题</h2><ul><liv-for="p in persons":key="p.id">
                 {{p.name}} ---- {{p.age}}
             </li></ul><button@click="update">修改数据</button></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{persons:[{'id':'10001','name':'紫邪情','age':'18'}]},methods:{update(){this.persons[0].name ='紫女';}}});</script></body></html>

1.15.2、Vue监视对象的原理

这个数据代理，只是简单了解而已，上面的流程其实不算对，因为少了一个步骤，整个流程应该是：data ————> 对data进行加工 —————> 把data中的数据给_data ————> 再把_data的内容给页面需要的data中（即：这一步相当于执行了 vm.data = _data , 这个data就是页面上的data嘛，所以就成功地让页面中的数据跟着自己的修改而改变了，但是底层不是用 vm.data = _data，方法名不一样，而且还要更复杂一点

模拟数据监听

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>4 - 模拟Vue数据监视</title></head><body><script>// 准备一个对象let data ={name:'紫邪情',sex:'女'}// vue做了精妙之一就是：设计了一个构造方法Observer(传对象名),这个东西刚刚在_data中见过它，打开就是用Observer打开的functionObserver(obj){// 拿到data中的所有key值（ 即：上面的name、sex ），放到一个数组里面去const keys = Object.keys( obj );// 遍历这些key值，得到每一个key
             keys.forEach((key)=>{// 使用defineProperty()做数据代理  这里的this就是指：传的对象
                 Object.defineProperty(this, key ,{get(){return obj[key];},set(val){
                         console.log("值被修改了，要开始解析数据、生成虚拟DOM、进行对比算法、响应数据了");
                         obj[key]= val;}})});}// 调用设计的构造方法，从而开始做 data 转 _dataconst objs =newObserver(data);let vm ={};
          vm._data = data = objs
 
         console.log( objs );</script></body></html>

1.15.3、了解Vue.set( target ,key , val )

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>5 - 了解Vue.set( target, key, val )</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2> 姓名: {{person.name}} </h2><br/><h2> 性别: {{person.sex}} </h2><br/></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{person:{name:'紫邪情',sex:'女'}},});</script></body></html>

注意

target不可以直接指向vm这个实例对象，更不可以把要操作的对象指向data这个根数据对象上

1.15.4、Vue监视数组数据的原理

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>1 - 正常实例 - 控制台查看结构</title><scriptsrc="../../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>爱好</h2><ul><liv-for="(h , index) in hobby":key="index"><h2> {{h}} </h2></li></ul></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{hobby:['吃','喝','嫖','赌','要不得']},});</script></body></html>

Vue中要监视到数组的变化，调用下面的7个API中的一个就可以

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

总结

1、vue会监视data中所有层级的数据
2、Vue如何监视对象中的数据？- 通过setter实现监视，且要在new Vue时就传入要监视的数据 - （1）、对象中后追加的属性，Vue默认不做响应式处理- （2）、如果需要对后添加的属性做响应式，则：通过如下API就可做到 vue.set( target, key, val ) 说明一下：其中的key可以是属性名，也可以是数组的下标值 vm.$set( target, key, val ) key和上面一样
3、Vue如何监视数组中的数据？- 通过封装 / 包裹数组更新元素的方法来实现，这个封装的方法做了两件事 - （1）、调用数组原生的同名API，对数组进行更新- （2）、重新解析数据、生成新的虚拟DOM、进行对比算法、响应页面
4、在Vue中要修改数组中的某个元素时，只能使用如下的方法- （1）、push()、pop()、shift()、unshift()、splice()、sort()、reverse()- （2）、vue.set( target, key, val ) 或 vm.$set( target, key, val )- 注意：vue.set( target, key, val ) 和 vm.$set( target, key, val ) 不能给vm（即：vue实例）或根数据对象data 进行添加属性操作
5、前面分析对象的原理时说过一个流程：数据发生改变，是通过setter来获取改变的数据，从而重新解析模板、生成新的虚拟DOM、进行对比算法、响应页面。在这里面有一个重要的流程：就是1、数据改变、setter获取到改变后的值、2、setter重新解析模板，这里1 ——> 2这一步有个专业的词叫做：数据劫持，劫持劫持嘛，半路把东西拿走了呗（就是setter把数据劫走了，它去做后续的操作）

1.16、input输入框中v-model的使用技巧

原因：

1、v-model收集的是value值
2、而radio是选择，是使用checked = true / false来做到是否选中的
3、因此：给此种radio类型的input添加一个value属性即可 v-model的修饰符

事件的修饰符

prevent 表示：阻止默认事件的触发
stop 表示：阻止事件冒泡
once 表示：只执行一次事件
v-model也有修饰符：number、lazy、trim- （1）、number修饰符，这个修饰符一般都是和input的number类型一起使用的，如：增加一个年龄- （2）、lazy修饰符，这个修饰符就光标离开之后再收集数据- （3）、trim修饰符，这个在java的String中见过，再熟悉不过了，就是去除前后的空格，不演示了

1.17、过滤器filters

1.18、Vue内置指令

回顾一下：已经学了Vue的哪些内置指令

v-on

、

v-bind

、

v-model

、

v-if

、

v-else-if

、

v-else

、

v-show

另外还有哪些内置指令

v-text

、

v-html

、

v-cloak

、

v-once

、

v-pre

1.18.1、v-text指令

v-text内置指令小结

1、作用：向其所在的节点中渲染“文本”内容
2、与插值表达式的区别：v-text会替换掉节点中的所有内容，而{{xxx}}插值表达式则不会

1.18.2、v-html内置指令

v-html小结

1、作用：向指定节点中渲染包含html结构的内容
2、与插值表达式的区别 - 1、v-html会替换掉节点中所有的内容，而插值表达式{{xx}}则不会- 2、v-html可以识别html结构
3、特别注意：v-html有安全性问题 - 1、在网站上动态渲染任意html是非常危险的，容易导致XSS攻击- 2、一定要在可信的内容上使用v-html，此指令永远不要用在用户提交的内容上!!!

1.18.3、v-cloak指令

v-cloak指令小结

1、本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
2、使用CSS配合v-cloak指令可以解决网速慢时页面展示出{{xxx}}插值表达式 / axios交互延迟的问题 - axios就是另类的ajax，甚至和ajax差不多一模一样，而Vue本身并不支持交互，所以才需要借助axios插件来进行交互，这也是玩了Vue之后必须掌握的一个知识点，对于学java的人来说太简单了，上手的话，看一眼就懂了，那就是一个链式调用罢了，就和StringBuilder一样链式调，只是需要传一些东西进去而已，而传的东西在ajax中都见过（当然：只学了Vue，然后使用ajax一样可以进行数据发送，只是axios更轻小而已）

1.18.4、v-once指令

v-once指令小结

1、v-once所在节点在初次动态渲染后，就视为静态内容了
2、以后数据的改变不会引起v-once所在结构的更新，可以用来做性能优化
3、注意：和事件修饰符中的once区别开 - （1）事件中的once修饰符是说的事件（函数 / js表达式）只执行一次- （2）而v-once指令是说的对div容器中的模板只动态渲染一次

1.18.5、v-pre指令

v-pre小结

1、v-pre是跳过其所在节点的编译过程，也就是：原本是什么样子，那么Vue就拿到的是什么样子，不会再去解析它
2、可利用它跳过：没有使用指令语法、没有使用插值表达式的节点，从而加快编译，优化性能

1.18.6、自定义指令

1.18.6.1、函数式定义

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>1 - 函数式定义</title><scriptsrc="../../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>原来的数值为: {{number}}</h2><hr/><!-- 使用自定义指令 --><h2> 扩大10倍之后的数值: <spanv-big="number"/></h2><hr/><button@click="number ++"><h4>number+1</h4></button></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{number:10},// 设置自定义指令 - 函数式// directives里面是可以写N多个自定义指令的，加了s嘛directives:{/* 
                 element     是自定义指令所在结构的HTML标签元素（ 节点 ）
                 binding     是模板中自定义指令和HTML元素进行的绑定的信息，在这个绑定中有一些需要的东西
                             注：次绑定和v-bind中的绑定不是一个概念
                             v-bind是指的HTML元素内的"属性"和值的绑定
             */big(element , binding){
                 element.innerText = binding.value *10}}});</script></body></html>

注意点：上面自定义的指令什么时候会被调用？

1、毫无疑问，HTML元素和自定义指令成功绑定时，自定义指令就会被调用，注意：这句话有坑，待会儿下一种自定义方式就会弄到这句话看到的效果就是初始化页面一上来就调用了一次，但是里面的门道不是这样的，成功绑定是什么意思，下一种自定义指令再说明
2、自定义指令所在的模板（ Div容器）被重新解析时会被调用别混淆了此种说法：自定义指令所依赖的数据发生改变时就会调用自定义指令，此种说法是错的

1.18.6.2、对象式定义

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>2 - 对象式定义</title><scriptsrc="../../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><!-- 现在做一件事情：模拟lable for标签效果 就是：光标位置锁定 别在意设计好不好--><h2>计数: {{count}}</h2><button@click="count++">地址: </button><inputtype="text"v-findfocus:value="address"></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{count:1,address:'中国大陆'},directives:{// 先用函数式来玩一下 注意：自定义指令 多个单词别整驼峰命名啊，识别不了的findfocus(node, binding){
             console.log(node , binding);
             node.value = binding.value;// 获取焦点
             node.focus();}}});</script></body></html>

1.18.6.3、自定义指令的两大坑和补充

1、命名的坑 - （1）、这个坑在前面玩对象式时已经说过了，多个单词的名字别采用驼峰命名，但是：只说了这一点，并没有说正确形式应该怎么命名- （2）、采用驼峰命名多个单词组成的指令名正确形式，采用 - 分隔开，指令定义中回归js原始配置

1.18.6.4 自定义全局指令

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>4 - 全局指令配置</title><scriptsrc="../../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2>计数: {{count}}</h2><button@click="count++">地址: </button><!-- 正确形式命名 采用 - 分隔开 --><inputtype="text"v-find-focus:value="address"></div><script>// 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip =false;// 定义全局指令 - 对象式/* 
             第一个参数  指令名
             第二个参数  配置项（ 就是把前面的对象配置{}这个花括号整体搬过来了而已 ），函数式也是一样的
                         只不过函数式需要使用 function给包裹起来而已
       */
       Vue.directive('find-focus',{// 1、HTML元素和指令进行绑定时执行的函数bind(node, binding){
               node.value = binding.value;},// 2、指令所在元素被插入被解析完毕，插入到页面后执行的函数inserted(node, binding){
               node.focus();},// 3、指令所在模板被重新解析时执行的函数update(node, binding){
               node.value = binding.value;}})/*   // 函数式全局指令
         Vue.directive('find-focus', function(){
             // 1、HTML元素和指令进行绑定时执行的函数
             bind(node, binding){
               node.value = binding.value;
             },
 
             // 2、指令所在元素被插入被解析完毕，插入到页面后执行的函数
             inserted(node, binding){
               node.focus();
             },
 
             // 3、指令所在模板被重新解析时执行的函数
             update(node, binding){
               node.value = binding.value;
             }
         })
  */// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{count:1,address:'中国大陆'},});</script></body></html>

小结

1、创建了全局指令之后，就可以摆脱只能在一个div容器中使用前面那种局部指令的缺陷了，也就是：现在可以再开一个div容器，然后在这个新开的div容器中一样可以使用全局配置中的东西
2、全局配置东西基本上都是这么玩的，后续玩组件会用到

1.18.6.5、指令总结

1、定义语法 - （1）、局部指令

对象式
    new Vue({
        directives: {
            指令名: {
                配置
            }
        }
    })

函数式
    new Vue({
        directives: {
            指令名(){
                配置
            }
        }
    })

（2）、全局配置

对象式
Vue.directive( '指令名',{
    配置
})

函数式
Vue.directive('指令名', function(){
    配置
})

2、配置中常用的3个回调（1）、bind( element, binding ) 指令与元素成功绑定时调用（2）、inserted( element, binding ) 指令所在元素被解析完、插入到页面时调用（3）、update（ element, binding ) 指令所在模板被重新解析时调用
3、注意项：（1）、指令定义时不加 v- ，但使用时必须加 v- （2）、指令名如果是多个单词，要使用 - 短横线分隔开，切忌使用驼峰命名（包括大驼峰和小驼峰）

1.20、Vue生命周期

1.20.1、了解Vue生命周期的概念

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>1 - 认识Vue生命周期概念</title><scriptsrc="../../js/vue.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><divid="app"><h2:style="{opacity: num}">玩动态改变文本透明度</h2>
             {{ change() }}
         </div><script>// 去除浏览器控制台中的警告提示信息
           Vue.config.productionTip =false;// 创建 vm 实例对象const vm =newVue({// 指定控制的区域el:'#app',data:{num:1,},// 改变透明度值大小methods:{change(){setInterval(()=>{if(this.num <=0)this.num =1;this.num -=0.01;},50);}}});</script></body></html>

生命周期过程

Vue生命周期总结

1、定义：Vue在关键时刻帮我们调用的一些特殊名称的函数
2、别名：生命周期回调函数 / 生命周期函数 / 生命周期钩子
3、注意： - （1）、生命周期函数的名字不可更改，但是：函数中的执行体是可以自己根据需求编写的- （2）、生命周期函数中的this指向是Vue实例或组件实例对象

标签： vue.js 前端 javascript

本文转载自: https://blog.csdn.net/weixin_44885062/article/details/125963867
版权归原作者 万水千山走遍TML 所有，如有侵权，请联系我们删除。

VUE