• Vue 核心（二）
  • 八、 绑定样式
    • 1、 class
    • 2、 style
  • 九、 条件渲染
    • 1、 渲染指令
    • 2、 使用示例
  • 十、 列表渲染
    • 1、 基本语法
    • 2、 key原理
    • 3、 列表过滤
    • 4、 列表排序
    • 5、 数组更新检测
    • 6、 大总结
  • 十一、 收集表单数据
  • 十二、 内置指令
    • 1、 v-text
    • 2、 v-html
    • 3、 v-cloak
    • 4、 v-once
    • 5、 v-pre
    • 6、 自定义指令
      • 6.1 示例
      • 6.2 总结
  • 十三、 生命周期
    • 1、 引出生命周期
    • 2、 分析生命周期
    • 3、 总结

Vue 核心（二）

八、 绑定样式

1、 class

      <script type="text/javascript" src="../js/vue.js"></script>  
    
    你好  
    
    样式数组  
    
    绑定对象  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        custom: "custom_1",        custom_arr: [],  // 样式数组，可以动态的删除和添加样式，增加动态性        custom_obj: {          custom_3: false,          custom_2: true,        },      }    },    methods: {      changeStyle() {        // 需求，点击事件设置随机样式        const style = (() => {          return  ["custom_1", "custom_2", "custom_3"]        })()  // 将所有的样式存放在一个数组中        let num = Math.floor(Math.random() * 3)        this.custom = style[num]      }    }  })</script>

2、 style

      <script type="text/javascript" src="../js/vue.js"></script>
  
    style内部样式  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        styleObj: {          fontSize: "40px",          color: "red",          backgroundColor: "blue",        },      }    },  })</script>

绑定样式：

(资料图)

1. class 样式：

   写法：:class="xxx"xxx 可以是字符串、对象、数组

   • 字符串适用于：类名不确定，需要动态获取
   • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
   • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定是否需要使用

2. style 样式：

   • :style={}对象绑定方法
   • :style=[]数组绑定方法，数组里面必须是存放样式的对象

九、 条件渲染

1、 渲染指令

v-if & v-elsev-show

比较 if 与 show；

• 如果需要频繁切换 v-show较好
• 当条件不成立时，v-if的所有节点不会解析（项目中使用）

2、 使用示例

      <script type="text/javascript" src="../js/vue.js"></script>
  
click me to hid，注意，只是进行隐藏，并没有完全删除
  
你好，这个内容是被彻底删除的
  
    
当前值是：{{num}}
    点我    
Angular
    
React
    
Vue
        
Angular
    
React
    
Vue
              
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        isShow: true,        num: 0,      }    },    methods: {      toHid() {        this.isShow = false      },    },  })</script>

十、 列表渲染

1、 基本语法

      <script type="text/javascript" src="../js/vue.js"></script>
    
人员列表
  
    
                  
        
          
遍历对象：{{value}} -- {{key}}
        
      
    
  
    
字符串遍历
  
    
            {{char}} -- {{index}}    
  
    
数字迭代
  
    
      {{value}} -- {{index}}    
  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        persons: [          {id: "001", name: "Make", age: 17},          {id: "002", name: "Jack", age: 16},          {id: "003", name: "Neck", age: 19},        ]      }    },  })</script>

v-for可以遍历数组、对象、字符串以及指定次数

2、 key原理

使用 index作为key时：

      <script type="text/javascript" src="../js/vue.js"></script>
  
人员列表
  添加一个数据  
    
                
        {{person.name}} + {{person.age}} 
              
    
  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        persons: [          {id: "001", name: "Make", age: 17},          {id: "002", name: "Jack", age: 16},          {id: "003", name: "Neck", age: 19},        ]      }    },    methods: {      addPerson() {        const p = {id: "004", name: "Lisa", age: 17}        this.persons.unshift(p)      }    },  })</script>

使用 id这个唯一标识时：

key 的内部原理：

1. 虚拟 DOM 中 key 的作用：
   • key 是虚拟 DOM 对象的标识，当数据发生改变时，Vue 会根据新数据生成新的虚拟 DOM！
   • 随后 Vue 进行 新虚拟 DOM与旧虚拟 DOM的差异比较

比较规则：

• 虚拟 DOM 找到了与新虚拟 DOM 相同的 key
  • 若虚拟 DOM 中内容没变，直接使用之前的真实 DOM
  • 若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM
• 就虚拟 DOM 中未找到与新虚拟 DOM 相同的 key：创建新的真实 DOM，随后渲染到页面中

如果使用 index 作为 key 可能会引发的问题：

• 若对数据进行：逆序添加，逆序删除等破坏顺序操作：会产生没有必要的真实 DOM 更新 ==》界面效果没有问题，但效率低
• 如果结构中还包含输入类的 DOM：会产生错误的 DOM 更新 ==》 界面有问题

开发中如何选择 key？

1. 最好使用每条数据唯一标识作为 key，比如 id、手机号、身份证号、学号等唯一标识；
2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的，但是不推荐。

3、 列表过滤

      <script type="text/javascript" src="../js/vue.js"></script>
  
人员列表
    
    
            
        {{person.name}} + {{person.age}} 
      
    
  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        persons: [          {id: "001", name: "Make", age: 17},          {id: "002", name: "Jack", age: 16},          {id: "003", name: "Neck", age: 19},        ],        keyword: "",      }    },    computed: {      filterPerson() {        return this.persons.filter((person) => {          return (person.name.indexOf(this.keyword) !== -1)        })      }    }  })</script>

这里使用的是 computed 来实现这个功能，当然，也可以使用 wacth 监视器来实现这个功能。

4、 列表排序

      <script type="text/javascript" src="../js/vue.js"></script>
  
人员列表
    升序  降序  原顺序  
    
            
        {{person.name}} + {{person.age}} 
      
    
  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        persons: [          {id: "001", name: "Make", age: 17},          {id: "002", name: "Jack", age: 16},          {id: "003", name: "Neck", age: 19},        ],        keyword: "",        sortType: 0, // 1 升序, -1 降序      }    },    computed: {      filterPerson() {        const arr =  this.persons.filter((person) => {          return (person.name.indexOf(this.keyword) !== -1)        })        // 判断这些数据是否需要排序        if (this.sortType) {          arr.sort((a, b) => {            return this.sortType === 1 ? a.age - b.age : b.age - a.age          })        }        return arr      }    }  })</script>

5、 数组更新检测

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

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

替换数组：

变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更方法，例如 filter()、concat()和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {  return item.message.match(/Foo/)})

注意，由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。

同时，也可以使用 Vue.set(target, key, value)来替换数组里面的值：

const vm = new Vue(data() {    return {    arr: ["a", "b", "c"],    }},)// 使用包裹方法修改数组的第一个元素：vm.arr.splice(0, 1, "d")// 使用 Vue.set 来修改数组的第一个元素Vue.set(vm.arr, 0, "d")vm.$set(vm.arr, 0, "d")

6、 大总结

      <script type="text/javascript" src="../js/vue.js"></script>
  
学生信息
  年龄+1岁  添加性别属性，默认值：男  修改性别  在列表首位添加一个朋友  修改第一个朋友的名字为张三  添加一个爱好  修改第二个爱好为：C++  
姓名：{{student.name}}
  
年龄：{{student.age}}
  
{{student.sex}}
  
爱好：
  
    
      {{hobby}}    
  
  
朋友们
  
    
      {{friend.name}} -- {{friend.age}}    
  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        student: {          name: "Lisa",          age: 17,          friends: [            {name: "Jerry", age: 37},            {name: "Tony", age: 38}          ],          hobbies: ["C", "Python", "C#"]        }      }    },    methods: {      addSex() {        Vue.set(this.student, "sex", "男")        // this.$set(this.student, "sex", "男")      },      addFriend() {        this.student.friends.unshift({          name: "Make",          age: 19,        })      },      changeFriend() {        this.student.friends[0].name = "张三"  // 修改数组里面的对象可以被 Vue 监视到      },      addHobby() {        this.student.hobbies.push("Java")      },      changeHobby() {        this.student.hobbies.splice(1, 1, "C++")  // 使用重写后的方法，修改数组后可以被检测到      },    }  })</script>

Vue 监视数据的原理：

1. Vue 会监视 data 中所有层次的数据

2. 如何监测对象中的数据？

   通过 setter 来实现，且要在 new Vue时，就传入要监测的数据

   • 对象中后追加的属性，Vue 默认不做响应式处理
   • 如需给后添加的属性做响应式，请使用 Vue 提供的 set(target, key, value)方法

3. 如何监视数组中的数据？

   通过包裹数组更新元素的方法实现，本质就是做了两件事：

   • 调用原生对应的方法对数组进行更新
   • 重新解析模板，进而更新页面

4. 在 Vue 修改数组中的某个元素一定要使用如下方法：

   • 使用被包裹的 API
   • 使用 set()方法

注意：Vue.set()和vm.$set()不能给 vm 或 vm 的根数据对象添加属性！！！

十一、 收集表单数据

      <script type="text/javascript" src="../js/vue.js"></script>
  
    账号：     
        密码：     
    年龄：     
        性别：    男 女  
    爱好：    Java     Python     C  
    所属校区：          请选择校区      南昌      赣州     
    其他信息：     
         阅读并接受 《用户使用协议》 
    提交  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        uerInfo: {          account: "",          password: "",          age: "",          sex: "male", // 默认为男          hobbies: ["Java"],  // 默认勾选 Java          city: "",          others: "",          agree: false,        }      }    },    methods: {      submitData() {        console.log(JSON.stringify(this.uerInfo))  // 将对象装换为 JSON 格式      },    },  })</script>

收集表单数据总结：

十二、 内置指令

我们学过的指令：

1、 v-text

功能：向其所在的节点渲染文本内容

            <script type="text/javascript" src="../js/vue.js"></script>
  
  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        name: "Lisa"      }    },  })</script>

v-text其会替换掉标签里面的所有内容，同时其不会解析标签

2、 v-html

            <script type="text/javascript" src="../js/vue.js"></script>
  
    
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        name: "
你好
"      }    },  })</script>

但是这个使用会比较危险，可能会受到 xss 攻击，一定要在可信的内容上使用 v-html，永远不要用在用户提交的内容上！

3、 v-cloak

            <script type="text/javascript" src="../js/vue.js"></script>  
{{name}}
  
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        name: "Lisa"      }    },  })</script>

v-cloak 指令（没有值）：

1. 本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性
2. 使用 css 配合 v-cloak 可以解决网速慢时，页面展示出 {{xx}} 的问题

4、 v-once

            <script type="text/javascript" src="../js/vue.js"></script>
  
初始化的n值是：{{n}}
    
当前的 n 值是：
  
n = {{n}}
   n+1
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        n: 1      }    },  })</script>

v-once 指令：

• v-once 所在节点在初次动态渲染后，就视为静态内容了
• 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能

5、 v-pre

            <script type="text/javascript" src="../js/vue.js"></script>
  
Vue 很简单
    
当前的 n 值是：
  
n = {{n}}
   n+1
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        n: 1      }    },  })</script>

v-pre 指令：

1. 跳过其所在节点的编译过程
2. 可利用它跳过没有使用指令语法、没有使用插值语法，会加快编译速度

6、 自定义指令

6.1 示例

实例1：定义一个 v-big指令，和 v-text类似，但会把绑定的数值放大 10 倍

      <script type="text/javascript" src="../js/vue.js"></script>
  
当前的n值是：
  
放大十倍的n值是：
  N+1
<script type="text/javascript">  Vue.config.productionTip = false;  // 全局指令  // Vue.directive("big", (element, binding) => {  //   // big 函数何时调用？  //   // 1. 指令与元素成功绑定时会调用（初始化）  //   // 2. 指令所在的模板被重新解析时调用  //   console.log("big", this)  // 注意，此处的 this 是 Window  //   console.log(element, binding.value)  //   element.innerText = binding.value * 10  // })  new Vue({    el: "#root",    data() {      return {        n: 0,      }    },    directives: {      "big-number"() {},  // 当指令为 v-big-number 时的写法      big(element, binding) {        // big 函数何时调用？        // 1. 指令与元素成功绑定时会调用（初始化）        // 2. 指令所在的模板被重新解析时调用        console.log("big", this)  // 注意，此处的 this 是 Window        console.log(element, binding.value)        element.innerText = binding.value * 10      },    }  })</script>

实例2：定义一个 v-fbind指令，和 v-bind功能类似，但可以让其所绑定的 input 元素默认获取焦点

      <script type="text/javascript" src="../js/vue.js"></script>
    
  N+1
<script type="text/javascript">  Vue.config.productionTip = false;  new Vue({    el: "#root",    data() {      return {        n: 0,      }    },    directives: {      fbind: {        // 如果只写成函数形式的话，其只有 bind 和 update 功能        bind(element, binding) {          console.log("指令与元素成功绑定时调用")          element.value = binding.value  // 把数据插入文本框内        },        inserted(element, binding) {          console.log("指令所在元素被插入页面时调用")          element.focus() // 获取焦点        },        update(element, binding) {          console.log("指令所在的模板被重新解析时调用")          element.value = binding.value        },      }    },  })</script>

全局指令：Vue.directive()

6.2 总结

一、 定义语法：

1. 局部指令：

   new Vue({    directives: {指令名: 配置对象 / 回调函数},})

2. 全局指令：

   Vue.drective("指令名", 配置对象 / 回调函数)

二、 配置对象中常用的三个回调：

1. bind：指令与元素成功绑定时调用
2. inserted：指令所在元素被插入页面时使用
3. update：指令所在模板结构被重新解析时调用

三、 备注：

• 指令定义时不需要加 v-，但是使用时需要加 v-
• 指令名如果是多个单词，需要使用 kabab-case命名方式，不要用cameCase命名

十三、 生命周期

1、 引出生命周期

生命周期：

• 又名：生命周期函数、生命周期函数、生命周期钩子
• 是什么：Vue 在关键时刻帮助我们调用的一些特殊名称的函数
• 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
• 生命周期函数中的 this 指向是 vm 或 组件实例对象

            <script type="text/javascript" src="../js/vue.js"></script>
  
SteveAnthony
<script type="text/javascript">  Vue.config.productionTip = false  new Vue({    el: "#root",    data() {      return {        opacity: 1,      }    },    mounted() {        console.log("Vue 将生成的 HTML 挂载到页面中")        setInterval(() => {            this.opacity -= 0.01            if (this.opacity <= 0) {                this.opacity = 1            }        }, 16)    },  })</script>

2、 分析生命周期

这是实例的生命周期。

解释图：

            <script type="text/javascript" src="../js/vue.js"></script>
  
当前的 n 值是：{{num}}
    N+1
<script type="text/javascript">  Vue.config.productionTip = false  new Vue({    el: "#root",    data() {      return {        num: 1,      }    },      methods: {        add() {            this.num += 1        },      },      beforeCreate() {          console.log("Vue 实例创建，但没有初始化数据监测和数据代理")          debugger;      },      created() {          console.log("Vue 初始化，数据监测、数据代理")          debugger;      },      beforeMount() {          console.log("完成模板编译，但是还没有进行页面的挂载")          debugger;      },      mounted() {          console.log("Vue 将生成的 HTML 挂载到页面中")          debugger;      },      beforeUpdate() {          console.log("状态更新之前执行函数，此时 data 中的状态值是最新的，但是页面上显示的数据还是旧的")          debugger;      },      updated() {          console.log("利用刚重新渲染的内容替换之前的内容")          debugger;      },      beforeDestroy() {          console.log("实例准备销毁，但是还没有销毁")          debugger;      },      destroy() {          console.log("实例已经销毁，实例所有内容均不可使用")          debugger;      }  })</script>

使用vm.$destory()完全想销毁一个实例，清理它与其他实例的连接，解绑它的全部指令以及事件监听器

3、 总结

常用的生命周期钩子：

1. mounted：发送 Ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等

关于销毁 Vue 实例：

• 销毁后借助 Vue 开发者工具看不到任何信息
• 销毁后自定义事件会失效，当原生 DOM 事件依然有效
• 一般不会在 beforeDestroy 操作数据，因为即便操作数据，也不会再触发更新流程了

标签：