手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

环球观察：Vue 核心（二）

2023-03-27 20:09:08 来源：博客园

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>

绑定样式：

【资料图】
class 样式：
写法：:class="xxx"xxx 可以是字符串、对象、数组
字符串适用于：类名不确定，需要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定是否需要使用
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时：

    遍历列表中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 的内部原理：

虚拟 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？

最好使用每条数据唯一标识作为 key，比如 id、手机号、身份证号、学号等唯一标识；
如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表用于展示，使用 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>  学生信息
                姓名：{{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 监视数据的原理：

Vue 会监视 data 中所有层次的数据
如何监测对象中的数据？
通过 setter 来实现，且要在 new Vue时，就传入要监测的数据
- 对象中后追加的属性，Vue 默认不做响应式处理
- 如需给后添加的属性做响应式，请使用 Vue 提供的 set(target, key, value)方法
如何监视数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
- 调用原生对应的方法对数组进行更新
- 重新解析模板，进而更新页面
在 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>

收集表单数据总结：

十二、内置指令

我们学过的指令：

指令	描述
`v-bind`	单向绑定解析表达式，可简写为 `:xxx`
`v-model`	双向数据绑定
`v-for`	遍历数组 / 对象 / 字符串
`v-on`	绑定事件监听，可简写为 @
`v-if / v-else-if / v-else`	条件渲染（动态控制节点是否存在）
`v-show`	条件渲染（动态控制节点是否展示）

1、 v-text

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

        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

        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

        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 指令（没有值）：
本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性
使用 css 配合 v-cloak 可以解决网速慢时，页面展示出 {{xx}} 的问题

4、 v-once

        v-once    <script type="text/javascript" src="../js/vue.js"></script>  初始化的n值是：{{n}}
    当前的 n 值是：
  n = {{n}}
  
<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

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

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

6、自定义指令

6.1 示例

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

    v-big  <script type="text/javascript" src="../js/vue.js"></script>  当前的n值是：
  放大十倍的n值是：
  
<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 元素默认获取焦点

    v-fbind  <script type="text/javascript" src="../js/vue.js"></script>    
  
<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 总结

一、定义语法：

局部指令：

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

全局指令：

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

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

bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时使用
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}}
    
<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、总结

常用的生命周期钩子：

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

关于销毁 Vue 实例：

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

关键词：

环球观察：Vue 核心（二）

Vue 核心（二）

八、 绑定样式

1、 class

2、 style

九、 条件渲染

1、 渲染指令

2、 使用示例

当前值是：{{num}}

1

1

1

十、 列表渲染

1、 基本语法

人员列表

字符串遍历

数字迭代

2、 key原理

人员列表

3、 列表过滤

人员列表

4、 列表排序

人员列表

5、 数组更新检测

6、 大总结

学生信息

姓名：{{student.name}}

年龄：{{student.age}}

{{student.sex}}

爱好：

朋友们

十一、 收集表单数据

十二、 内置指令

1、 v-text

2、 v-html

你好

3、 v-cloak

{{name}}

4、 v-once

初始化的n值是：{{n}}

当前的 n 值是：

5、 v-pre

Vue 很简单

当前的 n 值是：

6、 自定义指令

6.1 示例

当前的n值是：

放大十倍的n值是：

6.2 总结

十三、 生命周期

1、 引出生命周期

SteveAnthony

2、 分析生命周期

当前的 n 值是：{{num}}

3、 总结

八、绑定样式

九、条件渲染

1、渲染指令

2、使用示例

十、列表渲染

1、基本语法

3、列表过滤

4、列表排序

5、数组更新检测

6、大总结

十一、收集表单数据

十二、内置指令

6、自定义指令

十三、生命周期

1、引出生命周期

2、分析生命周期

3、总结