学习vue的第七天

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()

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

收集表单数据

若：<input type="text"/>,则v-model收集的是value值，用户的输入就是value值

若：<input type="radio"/>,则v-model收集的是value值，且要给标签配备value值

若：<input type="checked"/>

1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）

2.配置input的value属性：

（1）.v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）

（2）.v-model的初始值是数组，那么收集的就是value组成的数组

3.总之，单选框要配备value值，复选框要配备value值和数组

备注:v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数据

trim：输入首尾空格过滤