十一. Vue如何进行属性的侦听
释义：
属性侦听是指在Vue实例中，监听某个属性的变化，当属性发生变化时，执行相应的操作。
功能：
当数据模型的值放生变化时，被Vue监听到，然后执行一个函数
案例：尊姓和大名后面的文本要随着用户输入的值变化而变化，且全名中的文本也要一起变化
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p>尊姓:{{firstname}}</p> <p>大名:{{lastname}}</p> <input type="text" v-model="firstname"><br> <input type="text" v-model="lastname"> <p>全名:{{fullname}}</p> </div> <script> new Vue({ el:"#app", data:{ firstname:"本", lastname:"拉登", fullname:"本.拉登" }, methods:{}, watch:{ firstname: function () { this.fullname=this.firstname+"."+this.lastname; }, lastname: function () { this.fullname=this.firstname+"."+this.lastname; } } }) </script> </body> </html>
十二. Vue的生命周期
Vue生命周期详细图解如下：
①官网版
②中文图解版
对象的创建前：beforeCreate
对象的创建后：created
渲染（挂载）前：beforeMount
渲染（挂载）后：mounted
修改前：beforeUpdate
修改后：updated
销毁前：beforeDestroy
销毁后：Destroy
十三. 钩子函数
功能：
让开发者在vue的生命周期阶段执行自定义函数
位置：
和el/data/methods/watch同级别
案例：创建自定义函数模拟演示beforeCreate，created，beforeMount，mounted这四种生命周期的状态
代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div id="div01">{{msg}}</div> </div> <script> new Vue({ el:"#app", data:{ msg:"这是div中的内容" }, methods:{ fun01:function () { console.log("这是fun01函数"); } }, beforeCreate:function () { console.log("vue对象初始化前执行..."); console.log(this.msg);//没有 this.fun01();//报错 }, created:function () { console.log("vue对象初始化后执行..."); console.log(this.msg);//有值 this.fun01();//可以调用到 }, beforeMount:function () { console.log("vue对象渲染前执行..."); console.log(document.getElementById("div01").innerText);//{{msg}} }, mounted:function () { console.log("vue对象渲染后执行..."); console.log(document.getElementById("div01").innerText);//这是div中的内容 } }) </script> </body> </html>
十四. 综合案例：Vue版动态表格
案例需求
- ① 创建一个table，初始化员工的一些信息(编号、姓名、年龄、专业等)
- ② 创建一个表单，用户输入员工的信息
- ③ 表单中创建添加按钮，点击添加按钮，输入的员工信息追加到表格内
- ④ 每条员工信息后都有一个删除的超链接，点击删除，删除当前员工信息
案例图解
案例代码演示如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实现动态表格</title> <script src="vue.js"></script> </head> <body> <div id="app"> <table border="1" cellspacing="0px" width="250px" align="center" id="users"> <tr> <th>序号</th> <th>用户</th> <th>性别</th> <th>操作</th> </tr> <tr v-for="student in students"> <td>{{student.id}}</td> <td>{{student.name}}</td> <td>{{student.gender}}</td> <td> <input type="button" value="删除" @click="deleteUser" > </td> </tr> </table> <table border="0" cellspacing="0px" width="250px" align="center" id="input"> <tr> <td>序号</td> <td colspan="3"><input type="text" v-model:value="id" > </td> </tr> <tr> <td>姓名</td> <td colspan="3"><input type="text" v-model:value="name" ></td> </tr> <tr> <td>性别</td> <td colspan="3"><input type="text" v-model:value="gender" ></td> </tr> <tr> <td colspan="4" align="center"> <input type="button" value="添加用户" @click="addUser"> </td> </tr> </table> </div> <script> new Vue({ el:"#app", data:{ students:[ { id:1, name:"张三", gender:"男", }, { id:2, name:"李四", gender:"女" }, { id:3, name:"王五", gender:"男" } ], id:"null", name:"null", gender:"null", }, methods:{ //删除用户 deleteUser:function () { //event.target.parentNode --> 获取触发单击事件的按钮元素的父元素 //event.target.parentElement --> 获取触发单击事件的按钮元素的父元素 event.target.parentElement.parentElement.remove(); }, //思路：将新添加的数据加入到data中students数组中，即可 addUser:function () { var data= new Object(); data.id=this.id; data.name=this.name; data.gender=this.gender; this.students.push(data); } } }) </script> </body> </html>
