搜索到
1
篇与
的结果
-
列表渲染 1. 基本列表v-for指令：用于展示列表数据语法：v-for="(item,index) in list" :key="index"可以遍历数组，对象，字符串，指定次数<!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>用户信息（遍历数组）</h2> <ul> <li v-for="p in persons" :key="p.id"> {{p.name}} - {{p.age}} </li> </ul> <!-- 遍历对象 --> <h2>汽车信息（遍历对象）</h2> <ul> <li v-for="(c, index) in car" :key="index"> {{index}} - {{c}} </li> </ul> <!-- 遍历字符串 --> <h2>遍历字符串</h2> <ul> <li v-for="(char, index) in str" :key="index"> {{index}} - {{char}} </li> </ul> <!-- 遍历指定次数 --> <h2>遍历指定次数</h2> <ul> <li v-for="(num, index) in 5" :key="index"> {{index}} - {{num}} </li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { persons:[ {id:1,name:'孙笑川',age:33}, {id:2,name:'刘波',age:32}, {id:3,name:'Giao哥',age:34} ], car: { name: '五菱宏光Mini', price: '3-4万', color: 'pink' }, str: 'hello' } }) </script> </body> </html>2. key的原理虚拟DOM中key的作用：key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后进行新旧虚拟DOM的差异比较（diff算法）；对比规则（1）旧虚拟DOM中找到了与新虚拟DOM相同的key若虚拟DOM中内容没变，直接使用之前的真实DOM；若虚拟DOM中内容改变，则生成新的真实DOM，随后替换页面中之前的真实DOM（2）旧虚拟DOM中没有找到与新虚拟DOM相同的key创建新的真实DOM，随后渲染到页面用index作为key可能引发的问题（1）若对数据进行逆序添加、删除等破坏原有顺序的操作，会产生没必要的真实DOM更新（界面没问题，但效率低）（2）如果结构中还包含输入类的DOM，会产生错误的DOM更新，界面出现问题如何选择key（1）建议使用每条数据的唯一标识作为key（2）如果不存在对数据进行逆序添加、删除等破坏原有顺序的操作，仅用于渲染列表进行展示，也可以使用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"> <!-- 遍历数组 --> <h2>用户信息（遍历数组）</h2> <button @click.once="add">添加用户</button> <ul> <li v-for="p in persons" :key="p.id"> {{p.name}} - {{p.age}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { persons:[ {id:1,name:'孙笑川',age:33}, {id:2,name:'刘波',age:32}, {id:3,name:'Giao哥',age:34} ] }, methods: { add() { const p = {id:4,name:'药水哥',age:33}; this.persons.unshift(p) } } }) </script> </body> </html>3. Vue监视数据的原理Vue会监视data中所有层次的数据如何监测对象中的数据？通过setter，在new Vue时就传入要监测的数据（1）对象中后追加的属性，Vue默认不做响应式处理（2）针对（1）中的问题，可以使用如下API：Vue.set(target, propertyName/index, value) 或 vm.$set(target, propertyName/index, value)如何监测数组中的数据？通过包裹数组更新元素的方法实现，即：（1）调用原生对应的方法（2）重新解析模板 ---> 更新页面修改数组元素的方法（1）API：push(),pop(),shift(),unshift(),ssplice(),sort(),reverse()（2）Vue.set()或vm.$set注：Vue.set()或vm.$set 不能给vm或vm的根数据对象添加属性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue监测数据改变的原理（对象）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>姓名：{{name}}</h2> <h2>年龄：{{33}}</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', age: 33 } }) </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue监测数据改变的原理（数组）</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>老师姓名：{{name}}</h2> <h2>老师年龄：{{33}}</h2> <hr> <button @click="addSex">添加性别属性,默认值男</button> <h2>学生姓名：{{student.name}}</h2> <h2 v-if="student.sex">学生性别：{{student.sex}}</h2> <h2>学生年龄：真实{{student.age.rAge}}，对外{{student.age.sAge}}</h2> <h2>爱好：</h2> <ul> <li v-for="(h,index) in student.hobbies" :key="index"> {{h}} </li> </ul> <hr> <h2>朋友们</h2> <ul> <li v-for="(f,index) in student.friends" :key="index"> {{f.name}} - {{f.age}} </li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川', age: 33, student: { name: '刘波', sex: '', age: { rAge: 30, sAge: 18, }, hobbies: ['跑步','游泳','打篮球'], friends: [ {name:'张三',age:18}, {name:'李四',age:19}, {name:'王五',age:10} ] } }, methods: { addSex() { //Vue.set(this.student, 'sex', '男'); this.$set(this.student, 'sex', '男'); } } }) </script> </body> </html>
