最新要闻

广告

手机

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

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

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

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

家电

环球观察:Vue 核心(二)

来源:博客园
目录
  • 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时:

    遍历列表中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>

学生信息

姓名:{{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>

收集表单数据总结:

十二、 内置指令

我们学过的指令:

指令描述
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 指令(没有值):

  1. 本质是一个特殊属性,Vue 实例创建完毕并接管容器后,会删掉 v-cloak 属性
  2. 使用 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 指令:

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

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 总结

一、 定义语法:

  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}}

<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 操作数据,因为即便操作数据,也不会再触发更新流程了

关键词: