要想解决上面的这个问题 ,需要知道 Vue 是如何监测数组里元素的改变 , 但是 为了 更好的理解 ,这里先来说说 vue 是如何监测 对象里数据改变的 。
回顾 : 数据代理 Vue (3) , 之前说过 数据代理 , 是让 vm._data = data , 其实 这是第二步 , 第一步是 对 data 进行加工 ,
vue 监视原理 :
简单来说 , 监视数据的原理就是 靠 set ,当我们修改 data中 的属性 是 (比如 上面的 name , address) , vue 就会重新解析模板 ,
生成新的 虚拟 DOM , 然后 新旧 虚拟 DOM 对比 , 更新 页面 .
知道了 set , 下面 就来看看 set 这个 API
图二 : 上面是在控制台上写 ,下面写一个按钮 ,点击 添加 学校年龄
图三 : set 的局限性
vue 文档 : 列表渲染 — Vue.js (vuejs.org)
图二 :
可以看到想要 vue 监视到数组的变化 , 需要通过 上面列举的方法 , 其实 还可以通过 之前说过的 set 来改 .
同理 $set 一样 , 这里不展示了 .
将之前说过的 API 使用以下 :
Document
姓名: {{student.name}}
年龄: {{student.age}}
性别: {{student.sex}}
爱好:
- {{h}}
朋友:
- {{f.name}}-{{f.age}}
总结 :
Vue 监视数据的原理 :
vue 会监视 data 中所有 层次的数据 .
如何监测对象中的数据 ?
a.通过 setter 实现监视 , 且要在 new Vue 时就传入要监测的数据 (data 中 写的)
Vue.set(target,propertyName/index,value)
或 vm.$set(target,propertyName/index,value)
如何监测数组中的数据 ?
a. 通过包裹数组更新元素的方式实现 , 本质就是做了两件事 :
在Vue 修改数组中的某个元素一定要用如下方法 :
a. 使用 这些 API : push() , pop() , shift() , unshift(), splice() , sort() , reverse() ,
b. Vue.set() 或 vm.$set()
特别注意 : Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象 (data) 添加属性
最后 说以下 数据劫持 :
要求 :
实现 :
图二 :
图三 :
图四 :
图五 : 补充
附上代码 :
收集表达
总结 :
收集表单数据 :
若 , 则 v-model 收集的是 value 值 , 用户输入的就是 value值 .
若 , 则 v-model 收集的就是 value 值 , 且要给标签配置 value 值
若
a. 没有 配置 inpput 的value 属性, 那么收集的就是 checked (勾选 or 未勾选 , 是布尔值)
b. 配置 inputd value 属性 :
备注 : v-model的三个修饰符
a. lazy : 失去焦点再收集数据
b. number : 数组字符串转为有效的数字
c. trim : 输入首位空格过滤
注意 : 过滤器 并不是必要的 , 而是 vue 提供 一个新的 数据处理的方式 , 不想用 ,正常使用 计算属性 , methods也能完成.
下面这里通过第三方库来操作我们的时间 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
下面先通过计算属性 来完成 要求 :
计算属性实现 :
methods 实现
过滤器实现
上面写的过滤器 都是 局部的过滤器 ,只能 由 创建 过滤的 vue 实例使用 , 如果在出现一个vue 实例 就无法 使用了 .
下面来学习 创建全局的过滤器 :
总结 :
过滤器 :
定义 : 对要显示的数据进行特定格式化再显示(适用一些简单逻辑的处理) .
语法 :
备注 :
之前学过 v-on , v-bind , v-if , v-for , 这里 就来 学习一下 vue 提供的其他 指令 .
回顾一下之前学过的 :
从 v-text 名字 就可以知道 , 这个指令是 将一个文本渲染到页面上 , 下面演示一下下 :
图二 :
v-html : 向指定节点中渲染 含 html 结构的内容 .