当前位置：首页 > news >正文

Vue 核心（二）

news 文章来源：https://blog.csdn.net/qq_62789540/article/details/129802156 2025/5/13 19:17:27

文章目录

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>样式绑定</title><script type="text/javascript" src="../js/vue.js"></script><style>.basic {width: 400px;height: 400px;border: 1px solid indigo;}.custom_1 {background-color: cyan;}.custom_2 {background-color: green;}.custom_3 {background-color: red;}</style>
</head>
<body>
<div id="root"><!--绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定--><div class="basic" :class="custom" @click="changeStyle">你好</div><!--绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定--><div class="basic" :class="custom_arr" @click="changeStyle">样式数组</div><!--绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但是需要动态决定是否使用--><div class="basic" :class="custom_obj" @click="changeStyle">绑定对象</div>
</div>
<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>
</body>
</html>

2、 style

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>样式绑定</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><div :style="styleObj">style内部样式</div>
</div>
<script type="text/javascript">Vue.config.productionTip = false;new Vue({el: "#root",data() {return {styleObj: {fontSize: '40px',color: "red",backgroundColor: "blue",},}},})
</script>
</body>
</html>

绑定样式：

class 样式：

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

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

style 样式：

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

九、条件渲染

1、渲染指令

v-if & v-else
v-show

比较 if 与 show；

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

2、使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>样式绑定</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--使用 v-show 做条件渲染--><div v-show="isShow" @click="toHid">click me to hid，注意，只是进行隐藏，并没有完全删除</div><div v-if="false">你好，这个内容是被彻底删除的</div><div style="background-color: green"><h2>当前值是：{{num}}</h2><butto @click="num++">点我</butto><div v-show="num % 3 === 0">Angular</div><div v-show="num % 3 === 1">React</div><div v-show="num % 3 === 2">Vue</div><!--使用 v-if 做条件渲染--><div v-if="num % 3 === 0">Angular</div><div v-else-if="num % 3 === 1">React</div><div v-else>Vue</div><!--条件模板的使用：其不会影响HTML的结构，同时，其只可以同 v-if 使用--><template v-if="num === 1"><h3>1</h3><h3>1</h3><h3>1</h3></template></div>
</div>
<script type="text/javascript">Vue.config.productionTip = false;new Vue({el: "#root",data() {return {isShow: true,num: 0,}},methods: {toHid() {this.isShow = false},},})
</script>
</body>
</html>

十、列表渲染

1、基本语法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本列表</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><!--遍历列表--><h1>人员列表</h1><ul><li v-for="person in persons" :key="person.id"><!--<li v-for="(person, index) in persons" :key="person.id">--><!--遍历对象--><ul><li v-for="(value, key) in person" :key="key"><p>遍历对象：{{value}} -- {{key}}</p></li></ul></li></ul><!--遍历字符串--><h1>字符串遍历</h1><ul><li v-for="(char, index) of 'Hello World'" :key="index"><!--注意，of 和 in 是等价的-->{{char}} -- {{index}}</li></ul><!--遍历指定次数--><h1>数字迭代</h1><ul><li v-for="(value, index) of 5" :key="index">{{value}} -- {{index}}</li></ul>
</div>
<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>
</body>
</html>

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

2、 key原理

使用 index 作为key时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>遍历列表中key的作用</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h1>人员列表</h1><button @click.once="addPerson">添加一个数据</button><ul><li v-for="(person, index) in persons" :key="index"><!-- <li v-for="(person, index) in persons" :key="person.id"> 使用 id 作为 key--><!--key的作用--><p>{{person.name}} + {{person.age}} <br><input type="text" placeholder="输入数据"></p></li></ul></div>
<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>
</body>
</html>

使用 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、列表过滤

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h1>人员列表</h1><input type="text" placeholder="请输入需要搜索的名字" v-model="keyword"><ul><li v-for="person in filterPerson" :key="person.id"><!--key的作用--><p>{{person.name}} + {{person.age}} <br></p></li></ul></div>
<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>
</body>
</html>

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

4、列表排序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表过滤</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h1>人员列表</h1><input type="text" placeholder="请输入需要搜索的名字" v-model="keyword"><button @click="sortType=1">升序</button><button @click="sortType=-1">降序</button><button @click="sortType=0">原顺序</button><ul><li v-for="person in filterPerson" :key="person.id"><!--key的作用--><p>{{person.name}} + {{person.age}} <br></p></li></ul></div>
<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>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>大总结</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h1>学生信息</h1><button @click="student.age++">年龄+1岁</button><button @click="addSex">添加性别属性，默认值：男</button><button @click="student.sex = '未知'">修改性别</button><button @click="addFriend">在列表首位添加一个朋友</button><button @click="changeFriend">修改第一个朋友的名字为张三</button><button @click="addHobby">添加一个爱好</button><button @click="changeHobby">修改第二个爱好为：C++</button><h3>姓名：{{student.name}}</h3><h3>年龄：{{student.age}}</h3><h3 v-if="student.sex">{{student.sex}}</h3><h3>爱好：</h3><ul><li v-for="(hobby, index) in student.hobbies" :key="index">{{hobby}}</li></ul><h3>朋友们</h3><ul><li v-for="(friend, index) of student.friends" :key="index">{{friend.name}} -- {{friend.age}}</li></ul>
</div>
<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>
</body>
</html>

Vue 监视数据的原理：

Vue 会监视 data 中所有层次的数据
如何监测对象中的数据？

通过 setter 来实现，且要在 new Vue时，就传入要监测的数据
- 对象中后追加的属性，Vue 默认不做响应式处理
- 如需给后添加的属性做响应式，请使用 Vue 提供的 set(target, key, value) 方法
如何监视数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：
- 调用原生对应的方法对数组进行更新
- 重新解析模板，进而更新页面
在 Vue 修改数组中的某个元素一定要使用如下方法：
- 使用被包裹的 API
- 使用 set()方法

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

十一、收集表单数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>收集表单</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><form @submit.prevent="submitData"><label for="account">账号：</label><input type="text" id="account" v-model.trim="uerInfo.account" placeholder="请输入您的账号"> <br><!--.trim 去除输入框里面的空格--><label for="password">密码：</label><input type="password" id="password" v-model="uerInfo.password" placeholder="请输入您的密码"> <br><label for="age">年龄：</label><input type="number" id="age" v-model.number="uerInfo.age" placeholder="请输入您的年龄"> <br><!--使用指令修饰符来指定输入的内容为数字类型-->性别：男<input type="radio" name="sex" value="male" v-model="uerInfo.sex"> 女 <input type="radio" name="sex" value="female" v-model="uerInfo.sex"> <br>爱好：Java <input type="checkbox" v-model="uerInfo.hobbies" value="Java">Python <input type="checkbox" v-model="uerInfo.hobbies" value="Python">C <input type="checkbox" v-model="uerInfo.hobbies" value="C"> <br>所属校区：<select v-model="uerInfo.city"><option value="">请选择校区</option><option value="nc">南昌</option><option value="gz">赣州</option></select> <br>其他信息：<textarea cols="30" rows="10" v-model.lazy="uerInfo.others"></textarea> <br><!--.lazy 缓慢收集，失去焦点的一瞬间进行数据的收集--><input type="checkbox" v-model="uerInfo.agree"> 阅读并接受 <a href="javascript:;">《用户使用协议》</a> <br><button>提交</button></form>
</div>
<script type="text/javascript">Vue.config.productionTip = false;new Vue({el: "#root",data() {return {uerInfo: {account: "",password: "",age: "",sex: "male", // 默认为男hobbies: ["Java"],  // 默认勾选 Javacity: "",others: "",agree: false,}}},methods: {submitData() {console.log(JSON.stringify(this.uerInfo))  // 将对象装换为 JSON 格式},},})
</script>
</body>
</html>

收集表单数据总结：

十二、内置指令

我们学过的指令：

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

1、 v-text

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-text</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><div v-text="name"></div>  <!--更多的时候使用插值语法-->
</div>
<script type="text/javascript">Vue.config.productionTip = false;new Vue({el: "#root",data() {return {name: "Lisa"}},})
</script></body>
</html>

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

2、 v-html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-html</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><div v-html="name"></div>  <!--支持结构的解析--><div v-text="name"></div>
</div>
<script type="text/javascript">Vue.config.productionTip = false;new Vue({el: "#root",data() {return {name: "<h3>你好</h3>"}},})
</script></body>
</html>

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

3、 v-cloak

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-cloak</title><script type="text/javascript" src="../js/vue.js"></script><style>[v-cloak] {  /*选择所有含有v-cloak的标签*/display: none;  }</style>
</head>
<body>
<div id="root">
<h2 v-cloak>{{name}}</h2>  <!--当 Vue 被加载出来时，v-cloak 会被删除--></div>
<script type="text/javascript">Vue.config.productionTip = false;new Vue({el: "#root",data() {return {name: "Lisa"}},})
</script></body>
</html>

v-cloak 指令（没有值）：

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

4、 v-once

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-once</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h2 v-once>初始化的n值是：{{n}}</h2><!--v-once 指令的作用是插值语法只能执行一次，不会执行第二次--><h2>当前的 n 值是：</h2><p>n = {{n}}</p><button @click="n++"> n+1</button>
</div>
<script type="text/javascript">Vue.config.productionTip = false;new Vue({el: "#root",data() {return {n: 1}},})
</script></body>
</html>

v-once 指令：

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

5、 v-pre

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-pre</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h2 v-pre>Vue 很简单</h2><!--使得其所在节点跳过编译过程--><h2>当前的 n 值是：</h2><p>n = {{n}}</p><button @click="n++"> n+1</button>
</div>
<script type="text/javascript">Vue.config.productionTip = false;new Vue({el: "#root",data() {return {n: 1}},})
</script></body>
</html>

v-pre 指令：

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

6、自定义指令

6.1 示例

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-big</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body>
<div id="root"><h3>当前的n值是：<span v-text="n"></span></h3><h3>放大十倍的n值是：<span v-big="n"></span></h3><button @click="n++">N+1</button>
</div></body>
<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 是 Windowconsole.log(element, binding.value)element.innerText = binding.value * 10},}})
</script></html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-fbind</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body>
<div id="root"><input type="text" v-fbind:value="n"><hr><button @click="n++">N+1</button>
</div>
<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></body></html>

全局指令：Vue.directive()

6.2 总结

一、定义语法：

局部指令：

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

全局指令：

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

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

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

三、备注：

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

十三、生命周期

1、引出生命周期

生命周期：

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>生命周期</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h2 :style="{opacity}">SteveAnthony</h2>
</div>
<script type="text/javascript">Vue.config.productionTip = falsenew Vue({el: "#root",data() {return {opacity: 1,}},mounted() {console.log("Vue 将生成的 HTML 挂载到页面中")setInterval(() => {this.opacity -= 0.01if (this.opacity <= 0) {this.opacity = 1}}, 16)},})
</script></body>
</html>

2、分析生命周期

这是实例的生命周期。

解释图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>生命周期</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root"><h2>当前的 n 值是：{{num}}</h2><button @click="add">N+1</button>
</div>
<script type="text/javascript">Vue.config.productionTip = falsenew 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></body>
</html>

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

3、总结

常用的生命周期钩子：

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

关于销毁 Vue 实例：

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

Vue 核心（二）

文章目录Vue 核心（二）八、绑定样式1、 class2、 style九、条件渲染1、渲染指令2、使用示例十、列表渲染1、基本语法2、 key原理3、列表过滤4、列表排序5、数组更新检测6、大总结十一、收集表单数据十二、内置指令1、 v-text2、 v-html3、 v-…...

编程日记 2023/4/16 5:56:41

犯罪现场还原虚拟vr训练平台突破各种教学限制

在当今社会矛盾日益凸显、各式犯罪层出不穷的背景下，创新改革公安院校实战化教学方式，强化对基层公安队伍实战化应用型人才的供给能力具有重要性、紧迫性。案件现场勘查是门技术活，如何让民警快速有效提升技能、服务实战? 常规刑侦专业现场…...

编程日记 2023/4/11 19:33:24

LeetCode 617. 合并二叉树 | C++语言版

LeetCode 617. 合并二叉树 | C语言版LeetCode 617. 合并二叉树题目描述解题思路思路一：使用递归代码实现运行结果参考文章：思路二：减少遍历节点数代码实现运行结果参考文章：LeetCode 617. 合并二叉树题目描述题目地址&#xf…...

编程日记 2023/4/12 14:30:41

Python量化交易08——利用Tushare获取日K数据

总有同学问我要数据...很多第三方接口都能直接获取数据的，本次介绍怎么用Tushare库获取A股日k线行情的数据。 Tushare有两个版本，老版现在快弃用了。新版的官网链接在这：Tushare数据需要注册一个账号，然后改一下资料&#xff0…...

编程日记 2023/4/12 14:30:35

30张精美可视化大屏，无需代码直接套用，解决你95%的大屏需求！

通常制作可视化大屏，一般有两种方式代码开发：写代码调用数据和图表库，比如写JSEcharts ； 可视化工具：用现成的数据可视化工具前者简单直接，直接写代码就完事。但对于大部分人来说门槛较高，维…...

编程日记 2023/4/12 14:30:31

TCP网络事件模型的封装1.0

TCP网络模型的封装最近学习了TCP网络模型的封装，其中运用的封装技术个人感觉有点绕在反复读代码、做思维导图下初步理解了这套封装模型，不禁感叹原来代码还能这样写？神奇！ 为此将源码分享出来并将流程图画出，方便…...

编程日记 2023/4/11 19:35:16

NC271.二叉搜索树的后序遍历序列

文章目录一、题目描述二、示例三、主要思路一、题目描述输入一个整数数组，判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则返回 true ,否则返回 false 。假设输入的数组的任意两个数字都互不相同。提示： 1.二叉搜索树是指父亲节点大于左子树中…...

编程日记 2023/4/12 12:01:38

研究fastdds v2.8.0 1之基础模块

阅读 dds 协议 1.4 版本 ， 结合fastdds 2.8 的代码理解dds。 Entity 理解 DCPS基础设施模块由以下类组成： Entity DomainEntity QosPolicy Listener Status WaitSet Condition GuardCondition StatusCondition1、Entity 是所有DCPS 对象的基础类 virt…...

编程日记 2023/4/12 12:01:36

ElasticSearch系列 - SpringBoot整合ES：精确值查询 term

文章目录01. ElasticSearch term 查询？02. ElasticSearch term 查询数值型数据？03. ElasticSearch term 查询字符串类型数据？04. ElasticSearch term 查询日期型数据？05. ElasticSearch term 查询日期型数据的注意事项&#xff1f…...

编程日记 2023/4/12 12:01:34

关于async/await、promise和setTimeout执行顺序

关于async/await、promise和setTimeout执行顺序 async function async1() {console.log(async1 start);await async2();console.log(asnyc1 end); } async function async2() {console.log(async2); } console.log(script start); setTimeout(() > {console.log(setTimeOut…...

编程日记 2023/4/12 12:01:32

2023-03-31：如何计算字符串中不同的非空回文子序列个数？

2023-03-31：给定一个字符串 s，返回 s 中不同的非空回文子序列个数， 通过从 s 中删除 0 个或多个字符来获得子序列。如果一个字符序列与它反转后的字符序列一致，那么它是回文字符序列。如果有某个 i , 满足 ai ! bi &#xff…...

编程日记 2023/4/19 5:18:30

D. The Number of Imposters(二分图染色)

Problem - D - Codeforces Theofanis开始玩名为“Among them”的新网络游戏。然而，他总是和塞浦路斯球员一起踢球，他们都有一个相同的名字:“安德烈亚斯”(塞浦路斯最常见的名字)。在每个游戏中，Theofanis和n个其他玩家一起玩。因为它们都有相…...

编程日记 2023/4/12 12:01:21

图片太大怎么改小kb？简单的图片压缩方法分享

平时当我们在朋友圈分享一些有趣的照片或者使用图片素材进行上传的时候，经常遇到图片大小kb超出平台限制的情况，这时就无法正常上传了，遇到这种情况我们就需要想办法降低图片大小kb，那么有什么办法能够压缩图片大小呢？…...

编程日记 2023/4/12 14:30:10

【python-leecode刷题】动态规划类问题----以53. 最大子数组和为例

作者：20岁爱吃必胜客（坤制作人），近十年开发经验, 跨域学习者，目前于海外某世界知名高校就读计算机相关专业。荣誉：阿里云博客专家认证、腾讯开发者社区优质创作者，在CTF省赛校赛多次取得好成绩。…...

编程日记 2023/4/12 14:30:06

Idea常用快捷键设置

设置来源于尚硅谷宋红康老师第1组：通用型说明快捷键复制代码-copy ctrl c 粘贴-paste ctrl v 剪切-cut ctrl x 撤销-undo ctrl z 反撤销-redo ctrl shift z 保存-save all ctrl s 全选-select all ctrl a 第2组：提高编写速度（上…...

编程日记 2023/4/15 16:27:45

【新2023Q2模拟题JAVA】华为OD机试 - 分苹果

最近更新的博客华为od 2023 | 什么是华为od，od 薪资待遇，od机试题清单华为OD机试真题大全，用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为od机试，独家整理已参加机试人员的实战技巧本篇题解：分苹果题目 AB两个人把苹果…...

编程日记 2023/4/12 14:29:59

【博学谷学习记录】超强总结，用心分享丨人工智能自然语言处理 BERT、GPT、ELMO对比学习简记

目录三模型架构BERTGPTELMO三者差异点三模型架构 BERT 优点在11个NLP任务上取得SOAT成绩.利用了Transformer的并行化能力以及长语句捕捉语义依赖和结构依赖.BERT实现了双向Transformer并为后续的微调任务留出足够的空间. 缺点 BERT模型太大, 太慢.BERT模型中的中文模型是以…...

编程日记 2023/4/12 14:29:57

【嵌入式Bluetooth应用开发笔记】第四篇：初探蓝牙HOST及应用开发（持续更新ing）

概念蓝牙HOST（Bluetooth Host）是指能够连接到其他蓝牙设备并控制它们的设备。在蓝牙技术中，通常有两种类型的设备：蓝牙HOST和蓝牙SLAVE。蓝牙HOST通常是指拥有控制权的设备，它可以主动连接其他蓝牙设备并向其发送命令。相反，蓝牙SLAVE则是指被动连接的设备，它接受来自…...

编程日记 2023/4/15 16:29:51

GORM 基础 -- CRUD 接口

1、Create 1.1 创建纪录 user : User{Name: "Jinzhu", Age: 18, Birthday: time.Now()}result : db.Create(&user) // pass pointer of data to Createuser.ID // 回填插入数据的主键 result.Error // 返回的 error 信息 result.RowsAffect…...

编程日记 2023/4/18 15:29:33

为什么0代码自动化测试越来越受欢迎？一文2000字解析

目录 01、什么是零代码自动化测试 02、为什么零代码自动化测试越来越受欢迎 03、有代码和零代码自动化有什么区别 04、零代码自动化测试可以帮助你做什么 05、零代码自动化测试方法：NLP（自然语言处理） 06、为什么我们需要零代码自动化测…...

编程日记 2023/4/18 10:49:49

cleanmymac最新2023版 mac清理软件CleanMyMac X4.12.5 中文版功能介绍

CleanMyMac X4.12.5 中文版只需两个简单步骤就可以把系统里那些乱七八糟的无用文件统统清理掉，节省宝贵的磁盘空间。cleanmymac x个人认为X代表界面上的最大升级，功能方面有更多增加，与最新macOS系统更加兼容，流畅地与系统性能更加…...

编程日记 2023/4/19 15:14:26

pyhon部署注意事项

前言：相信看到这篇文章的小伙伴都或多或少有一些编程基础，懂得一些linux的基本命令了吧，本篇文章将带领大家服务器如何部署一个使用django框架开发的一个网站进行云服务器端的部署。文章使用到的的工具 Python：一种编程语言&…...

编程日记 2023/4/12 14:29:44

宣城x移动云，打造“城市级物联感知平台”

随着新一代信息技术与城市现代化的深度融合，智慧城市建设的重要性也愈发凸显。而在智慧城市建设中，物联网感知体系扮演着中枢神经系统的角色。安徽宣城紧抓长三角城市群一体化发展机遇，为构建“数字宣城”建设发展新模式，携手移…...

编程日记 2023/4/18 10:51:57

英伟达Jetson NX套件刷机，配置Ubuntu20。

0. 前言人并没有眼见得那么光鲜亮丽，博客也是。今天推荐一本书《一百个人的十年》，没错就是我们的那十年（60年代）。写得很真实，牛棚猪圈，确实如此。 1. SdkManager安装官网下载。打开终端执行命令sud…...

编程日记 2023/4/18 10:54:31

Vue计算属性

计算属性计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已…...

编程日记 2023/4/12 14:29:35

代码随想录刷题-字符串-反转字符串

文章目录反转字符串习题双指针swap 的两种方式反转字符串本节对应代码随想录中：代码随想录，讲解视频：字符串基础操作！ | LeetCode：344.反转字符串_哔哩哔哩_bilibili 习题题目链接：344. 反转字符串 - …...

编程日记 2023/4/18 10:56:25

14-链表练习-剑指 Offer II 021. 删除链表的倒数第 n 个结点

题目给定一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。示例 1： 输入：head [1,2,3,4,5], n 2 输出：[1,2,3,5] 示例 2： 输入：head [1], n 1 输出：[] 示例 3&…...

编程日记 2023/4/15 16:30:53

用Java解决华为OD机试考题，真的高效，真的强，来吧，清单奉上，祝你上岸

华为 OD 机试题最新（Java）清单（机试题库还在逐日更新） 题库目录直接在本页使用 CtrlF，输入题目名称就可以进行检索。序号文章分值1【华为OD机试真题JAVA】快递装载问题_国服第二切图仔的博客-CSDN博客1002【华为…...

编程日记 2023/4/12 2:38:55

【Stable Diffusion】Stable Diffusion免安装在线部署教程

一、开启Google Colab网址官网：https://colab.research.google.com/ 点击添加代码： 二、执行如下代码指令 !pip install --upgrade fastapi0.90.1 !git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui !git clone https://github.…...

编程日记 2023/4/12 2:39:40

Jetson设备如何接调试串口工具查看内核打印信息

方便小白使用如下教程。一、认识USB转串口调试工具转接小板和硬件连接方式如图，是一款USB TO TTL转换板，这款小板支持3种供电模式：对外输出5V、对外输出3.3V和由外部供电。正面有一个跳帽，跳帽跳到3V3，小板由US…...

编程日记 2023/4/12 12:01:17

文章目录

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

相关文章：

八、绑定样式

九、条件渲染

1、渲染指令

2、使用示例

十、列表渲染

1、基本语法

3、列表过滤

4、列表排序

5、数组更新检测

6、大总结

十一、收集表单数据

十二、内置指令

6、自定义指令

十三、生命周期

1、引出生命周期

2、分析生命周期

3、总结