vue基础教程

vue基础教程，带你走进vue

万水千山走遍TML

2926人浏览 · 2022-07-24 20:42:21

万水千山走遍TML · 2022-07-24 20:42:21 发布

VUE

1、基础篇

1.1、初识Vue

准备
VsCode 插件 Vetur、Prettier-Code formatter

浏览器工具 vuejs devtool

vue基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-初识vue.html</title>

    <!-- 0、导入vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>

    <!-- 1、定义一个容器 -->
    <div id="app">

        <h3> 第一个vue程序，并使用插值表达式取得值为：{{name}} </h3>
    </div>

</body>

<script>

    // 去除浏览器控制台中的错误信息  可以尝试去掉这个，然后进入浏览器控制台，观察上面报的东西
    Vue.config.productionTip = false;

    // 2、初始化Vue容器
    new Vue({
        el: "#app",
        data: {
            name: "紫邪情",
            age: "18"
        }
    })
</script>

</html>

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

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


 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>02-vue之v-bind</title>
 
     <script src="../js/vue.js"></script>
 </head>
 <body>
 
     <div id="app">
         <!-- 常规写法：v-bind绑定的是属性 -->
         <a v-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;
 
     new Vue({
         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的数据绑定

这里需要了解mvvm模式，要理解，可以参照java中的mvc模式

 
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>03-v-model</title>
 
     <script src="../js/vue.js"></script>
 </head>
 <body>
 
     <div id="app">
         <!-- 单向绑定：绑的是属性 -->
         单向绑定：<input type="text" :value="name">  <br/>
         <!-- 双向绑定：绑的是值 -->
         双向绑定：<input type="text" :myName="name" v-model:value="username">   <br/>
         <!-- 双向绑定的简写 因为：model绑的就是值，因此：value可以省掉 -->
         双向绑定：<input type="text" :myName="name" v-model="username">
     </div>
     
 </body>
 
 <script>
 
     Vue.config.productionTip = false;
 
     new Vue({
         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的两种写法


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>04-vue的el和data的两种写法</title>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app"></div>
 
     <script>
       // 创建 vm 实例对象
       const vm = new Vue({
         //指定控制的区域
         // 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



 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>理解MVVM</title>
 
     <script src="../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <h2>姓名:{{name}}</h2> <br>
         <h2>性别:{{sex}}</h2>   
         <hr>
         <h2>智商:{{1+1}}</h2>
     </div>
 
     <script>
       // 创建 vm 实例对象
       const vm = new Vue({
         //指定控制的区域
         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()函数

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>05-了解object.defineProperty()</title>
     <script src="../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、简单理解数据代理原理

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-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、事件绑定及其修饰符

 
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>07-事件绑定及其修饰符</title>
 
     <script src="../js/vue.js"></script>
   </head>
 
   <!-- 
         常用的事件修饰: 事件、事件，放在对应事件后就可以了，如：@click.prevent = "xxxx"
             prevent     表示：阻止默认事件的触发
             stop        表示：阻止事件冒泡
             once        表示：只执行一次事件
 
    -->
   
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
 
         <!-- vue中事件绑定的简单写法 -->
         <button v-on:click="showInfo()">点我显示提示信息</button>
 
         <br/>
 
         <!-- vue中事件绑定的简写 还可以传递参数 -->
         <button @click="showInfo2($event, 66)">点我获取带参的事件信息</button>
     </div>
 
     <script>
 
         Vue.config.productionTip=false;
         
       // 创建 vm 实例对象
       const vm = new Vue({
         //指定控制的区域
         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、计算属性

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>10-计算属性conputed</title>
 
     <script src="../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         姓名: <input type="text" v-model="name"> <br/>
         性别: <input type="text" v-model="sex">
         <hr>
         信息: <span>{{info}}</span>
     </div>
 
     <script>
 
     Vue.config.productionTip=false;
       // 创建 vm 实例对象
       const vm = new Vue({
         //指定控制的区域
         el:'#app',
         data:{
             name:'紫邪情',
             sex:'女'
         },
 
         // 所谓的计算属性：就是通过已有属性（ 一般为data中的 ）计算得来
         computed: {
             info:{
                 get(){
                     console.log('开始调用get()');
                     return this.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


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

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


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>12 - 使用计算属性做一个Demo 简化</title>
 
     <script src="../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="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 = new Vue({
         //指定控制的区域
         el:'#app',
         data:{
             name: true
         },
 
         computed:{
             result(){
                 return this.name?'紫邪情':'紫女'
             }
         },
 
         // methods: {
         //     changeResult(){
         //         return this.name = !this.name
         //     }
         // },
        });
     </script>
   </body>
 </html>

1.10、监视属性

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>13 - 监视属性 watch</title>
 
     <script src="../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <h2>你是:{{result}}</h2>
 
         <button @click= "name = !name">切换名字</button>
     </div>
 
     <script>
        // 去除浏览器控制台中的错误信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         //指定控制的区域
         el:'#app',
         data:{
             name: true
         },
 
         computed: {
             result() {
                 return this.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、深度监视 - 需要掌握的一种



<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>14 - 深度监视</title>

   <script src="../js/vue.js"></script>
 </head>

 <body>
   <!-- 被 vm 实例所控制的区域 -->
   <div id="app">
       <h2>你是:{{result}}</h2>

       <!-- 现在这个name就是person里面的了，这就是需要监视多层属性变化 -->
       <button @click= "person.name = !person.name">切换名字</button>
   </div>

   <script>
      // 去除浏览器控制台中的错误信息
     Vue.config.productionTip = false;

     // 创建 vm 实例对象
     const vm = new Vue({
       //指定控制的区域
       el:'#app',
       data:{
           person:{
               name: true
           }
       },

       computed: {
           result(){
               return this.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的坑


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>15 - computed和watch的坑</title>
 
     <script src="../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         姓: <input type="text" v-model="firstname"> <br/>
         名: <input type="text" v-model="lastname">
 
         <hr/>
 
         信息: {{fullname}}
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         //指定控制的区域
         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实现


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

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

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>03 - 用watch实现异步操作</title>
 
     <script src="../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         姓: <input type="text" v-model = "firstname"> <br/>
         名: <input type="text" v-model = "lastname">
 
         <hr/>
 
         信息: {{fullname}}
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         // 指定控制的区域
         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

 
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>1 - 认识v-for</title>
 
     <script src="../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <!-- 1、遍历数组 -->
         <h2>人员信息</h2>
         <!-- 简写形式 -->
         <ul>
             <li v-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>
             <li v-for = "(val,index) in persons" :key="val.id">
                 {{val.name}} ----- {{val.age}} ------ {{index}}
             </li>
         </ul>
 
 
         <!-- 2、遍历对象 -->
         <h2>神奇之地</h2>
         <ul>
             <li v-for = "(val,index) in like" :key="index">
                 {{val}} ------ {{index}}
             </li>
         </ul>
 
         <!-- 其实另外还有：v-for还可以遍历字符串、某个数字（ 循环这个数字这么多次 ），但是这两种基本上都不用，所以不说明了 -->
 
 
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         // 指定控制的区域
         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"就会出问题


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>2 - key值的坑</title>
 
     <script src="../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <h2>人员信息</h2>
         <ul>
             <!-- 这里使用index作为key值 -->
             <li v-for = " (p , index) in persons" :key="index">
                 {{p.name}} ----- {{p.age}} <input type="text">
             </li>
         </ul>
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         // 指定控制的区域
         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实现


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>3 - 列表过滤（ 查询功能 ）</title>
 
     <script src="../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <H2>人员信息列表</H2>
 
         搜索:<input type="text" placeholder="请输入搜索词" v-model="keyWord">
         <ul>
             <li v-for = " p in filterPersons" :key="p.id">
                 {{p.name}} -------- {{p.age}}
             </li>
         </ul>
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         // 指定控制的区域
         el:'#app',
         data:{
             // 1、搜集搜索框中的内容 搜索框内容变，这里的内容也要变，所以：双向绑定v-model
             keyWord: '',
 
             // 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()返回的就是-1
                         return p.name.indexOf(newVal) !== -1
                     })
                }
            }
        }
        });
     </script>
   </body>
 </html>

2、使用computed实现


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>3 - 列表过滤（ 查询功能 ）</title>
 
     <script src="../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <H2>人员信息列表</H2>
 
         搜索:<input type="text" placeholder="请输入搜索词" v-model="keyWord">
         <ul>
             <li v-for = " p in filterPersons" :key="p.id">
                 {{p.name}} -------- {{p.age}}
             </li>
         </ul>
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         // 指定控制的区域
         el:'#app',
         data:{
             // 1、搜集搜索框中的内容 搜索框内容变，这里的内容也要变，所以：双向绑定v-model
             keyWord: '',
 
             // 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() {
                return this.persons.filter( (p)=>{
                    return p.name.indexOf( this.keyWord ) !== -1
                })
            }
        }
        });
     </script>
   </body>
 </html>

1.14.4、列表排序


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>4 - 列表排序</title>
 
     <script src="../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <h2>人员信息</h2>
         搜索: <input type="text" v-model = "keyWoed" placeholder="请输入关键字">
         <button @click = "sortType = 1">升序</button>
         <button @click = "sortType = 2">降序</button>
         <button @click = "sortType = 0">原顺序</button>
         <ul>
             <li v-for = " p in filterPersons" :key="p.id">
                 {{p.name}} ----- {{p.age}}
             </li>
         </ul>
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         // 指定控制的区域
         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)=>{
                         return this.sortType == 1 ? previous.age - last.age : last.age - previous.age;
                     })
                 }
 
                 return arr;
             }
         }
        });
     </script>
   </body>
 </html>

1.15、Vue监视数据的原理

1.15.1、监视数据失效实例

正常版


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>1 - 监视数据失效实例</title>
 
     <script src="../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <h2>Vue监视数据失效问题</h2>
         <ul>
             <li v-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 = new Vue({
         // 指定控制的区域
         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，方法名不一样，而且还要更复杂一点

模拟数据监听

 
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>4 - 模拟Vue数据监视</title>
 
   </head>
 
   <body>
     <script>
 
         // 准备一个对象
         let data = {
             name: '紫邪情',
             sex: '女'
         }
 
         // vue做了精妙之一就是：设计了一个构造方法Observer(传对象名),这个东西刚刚在_data中见过它，打开就是用Observer打开的
         function Observer(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 转 _data
         const objs = new Observer(data);
         let vm = {};
          vm._data = data = objs
 
         console.log( objs );
 
     </script>
   </body>
 </html>

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


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

注意

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

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

<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>1 - 正常实例 - 控制台查看结构</title>
 
     <script src="../../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <h2>爱好</h2>
 
         <ul>
             <li v-for = "(h , index) in hobby" :key="index">
                 <h2> {{h}} </h2>
             </li>
         </ul>
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         // 指定控制的区域
         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、函数式定义


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>1 - 函数式定义</title>
 
     <script src="../../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <h2>原来的数值为: {{number}}</h2>
 
         <hr/>
 
         <!-- 使用自定义指令 -->
         <h2> 扩大10倍之后的数值: <span v-big = "number"/> </h2>
 
         <hr/>
 
         <button @click = "number ++"> <h4>number+1</h4></button>
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         // 指定控制的区域
         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、对象式定义

 
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>2 - 对象式定义</title>
 
     <script src="../../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
       <!-- 现在做一件事情：模拟lable for标签效果 就是：光标位置锁定 别在意设计好不好-->
       <h2>计数: {{count}}</h2>
       <button @click = "count++">地址: </button>
       <input type="text" v-findfocus:value= "address">
       
     </div>
 
     <script>
        // 去除浏览器控制台中的警告提示信息
       Vue.config.productionTip = false;
 
       // 创建 vm 实例对象
       const vm = new Vue({
         // 指定控制的区域
         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 自定义全局指令


 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>4 - 全局指令配置</title>
 
     <script src="../../../js/vue.js"></script>
   </head>
 
   <body>
     <!-- 被 vm 实例所控制的区域 -->
     <div id="app">
         <h2>计数: {{count}}</h2>
         <button @click = "count++">地址: </button>
 
         <!-- 正确形式命名 采用 - 分隔开 -->
         <input type="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 = new Vue({
         // 指定控制的区域
         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生命周期的概念

  <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
         <title>1 - 认识Vue生命周期概念</title>
 
         <script src="../../js/vue.js"></script>
       </head>
 
       <body>
         <!-- 被 vm 实例所控制的区域 -->
         <div id="app">
             <h2 :style="{opacity: num}">玩动态改变文本透明度</h2>
             {{ change() }}
         </div>
 
         <script>
            // 去除浏览器控制台中的警告提示信息
           Vue.config.productionTip = false;
 
           // 创建 vm 实例对象
           const vm = new Vue({
             // 指定控制的区域
             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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^