Vue基础知识五

1、列表渲染

语法：v-for="(item,index) in xxx" :key="yyy"
用于展示列表信息，可遍历数组、对象、字符串、指定次数
示例——vue、react中的key有什么作用
　　1、虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行想【新虚拟DOM】与【旧虚拟DOM】的差异对比，比较规则如下：
　　2、对比规则：  （1）旧的中找到了与新的相同的key：内容没变直接使用之前的真实DOM，内容变了则生成新的真实DOM替换掉之前的真实DOM。

　　　　　　　　　 （2）旧的中未找到与新的相同的key：创建新的真实DOM，随后渲染到页面
列表过滤——模糊搜索：用watch/computed实现
Vue监视数据的原理
　　1. vue会监视data中所有层次的数据。
　　2. 如何监测对象中的数据——通过setter实现监视，且要在new Vue时就传入要监测的数据。
　　　　(1).对象中后追加的属性，Vue默认不做响应式处理
　　　　(2).如需给后添加的属性做响应式，请使用如下API： Vue.set(target，propertyName/index，value) 或 vm.$set(target，propertyName/index，value)
　　3. 如何监测数组中的数据——通过包裹数组更新元素的方法实现，本质就是做了两件事：(1).调用原生对应的方法对数组进行更新。(2).重新解析模板，进而更新页面。
　　4.在Vue修改数组中的某个元素一定要用如下方法：(1).使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse() (2).Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

2、收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
　　1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
　　2.配置input的value属性:
　　　　(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
　　　　(2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
　　lazy：失去焦点再收集数据
　　number：输入字符串转为有效的数字
　　trim：输入首尾空格过滤