文章目录

• 1. 监测数据原理
• • 1.1 通过问题引出
  • 1.2 开始
  • 1.3 Vue.set() 方法
  • 1.4 vue 监视 数组
  • 1.5 小练习
• 2. 收集表数据
• 3. 过滤器
• 4. 内置指令
• • 4.1 v-text
  • 4.2 v-html
  • 4.3 v-cloak
  • 4.4 v-once
  • 4.5 v-pre

1. 监测数据原理

1.1 通过问题引出

1.2 开始

 
要想解决上面的这个问题 ，需要知道 Vue 是如何监测数组里元素的改变 , 但是 为了 更好的理解 ，这里先来说说 vue 是如何监测 对象里数据改变的 。

 
回顾 ： 数据代理 Vue (3) ， 之前说过 数据代理 ， 是让 vm._data = data , 其实 这是第二步 ， 第一步是 对 data 进行加工 ,

 
vue 监视原理 ：

 
简单来说 ， 监视数据的原理就是 靠 set ，当我们修改 data中 的属性 是 (比如 上面的 name ， address) ， vue 就会重新解析模板 ，

生成新的 虚拟 DOM ， 然后 新旧 虚拟 DOM 对比 ， 更新 页面 .

知道了 set ， 下面 就来看看 set 这个 API

1.3 Vue.set() 方法

 
图二 ： 上面是在控制台上写 ,下面写一个按钮 ，点击 添加 学校年龄

 
图三 ： set 的局限性

1.4 vue 监视 数组

 
vue 文档 : 列表渲染 — Vue.js (vuejs.org)

 
图二 ：

 
可以看到想要 vue 监视到数组的变化 ， 需要通过 上面列举的方法 ， 其实 还可以通过 之前说过的 set 来改 .

 
同理 $set 一样 ， 这里不展示了 .

1.5 小练习

 
将之前说过的 API 使用以下 :

年龄+1岁

添加性别属性, 默认值: 男

隐藏 性别修改性别

在列表首页添加一名朋友

修改第一个朋友的名字为: 鲲鹏

添加一个爱好

修改第一个爱好为: 打羽毛球
姓名: {{student.name}}
年龄: {{student.age}}
性别: {{student.sex}}
爱好: 
{{h}}
朋友: 
{{f.name}}-{{f.age}}

 
总结 :
 
Vue 监视数据的原理 :

1. vue 会监视 data 中所有 层次的数据 .
    

2. 如何监测对象中的数据 ?

   a.通过 setter 实现监视 ， 且要在 new Vue 时就传入要监测的数据 (data 中 写的)

   • 对象中后追加的属性 ， Vue 默认不做响应式处理
   • 如需要给后添加的属性做响应式 ， 请使用 这如下 API
   • Vue.set(target,propertyName/index,value) 或 vm.$set(target,propertyName/index,value)
      

3. 如何监测数组中的数据 ？

   a. 通过包裹数组更新元素的方式实现 ， 本质就是做了两件事 :

   • 通过调用原生对应的方法对数组进行更新.
   • 重新解析模板，进而更新页面
      

4. 在Vue 修改数组中的某个元素一定要用如下方法 :

   a. 使用 这些 API ： push() , pop() , shift() , unshift(), splice() , sort() ， reverse() ,

   b. Vue.set() 或 vm.$set()

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

 
最后 说以下 数据劫持 :

2. 收集表数据

 
要求 ：

 
实现 ：

 
图二 ：

图三 ：

 
图四 ：

 
图五 ： 补充

 
附上代码 ：

 账号 :

 密码 :

年龄 : 

男 女 

爱好 :学习 打游戏吃饭 

请选择小区北京上海深圳武汉

其他信息 :
 
阅读并接收《用户协议》提交

 
总结 ：

收集表单数据 :

1. 若 ， 则 v-model 收集的是 value 值 ， 用户输入的就是 value值 .

2. 若 , 则 v-model 收集的就是 value 值 ， 且要给标签配置 value 值

3. 若

   a. 没有 配置 inpput 的value 属性， 那么收集的就是 checked (勾选 or 未勾选 ， 是布尔值)

   b. 配置 inputd value 属性 :

   • v-model 的初始值是非数组，那么收集的就是 checked (勾选 or 未 勾选 ， 是布尔值)
   • v-model 的初始值 是 数组，那么收集的就是 value 组成的数组

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

   a. lazy ： 失去焦点再收集数据

   b. number : 数组字符串转为有效的数字

   c. trim : 输入首位空格过滤

3. 过滤器

 
注意 ： 过滤器 并不是必要的 ， 而是 vue 提供 一个新的 数据处理的方式 ， 不想用 ，正常使用 计算属性 ， methods也能完成.

 
下面这里通过第三方库来操作我们的时间 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

 
下面先通过计算属性 来完成 要求 :

 
计算属性实现 :

 
methods 实现

 
过滤器实现

 
上面写的过滤器 都是 局部的过滤器 ，只能 由 创建 过滤的 vue 实例使用 , 如果在出现一个vue 实例 就无法 使用了 .

 
下面来学习 创建全局的过滤器 :

 
总结 ：

过滤器 ：

定义 ： 对要显示的数据进行特定格式化再显示(适用一些简单逻辑的处理) .

语法 ：

1. 注册过滤器 : Vue.filter(name,callback) 或 new Vue {filters:{}}
2. 使用过滤器 ：{{ xxx | 过滤器名}} 或 v-bind : 属性 = “xxx | 过滤器名”

备注 ：

1. 过滤器也可接收额外参数 ， 多个过滤器 也可以串联
2. 并没有改变原本的庶几乎，是产生新的对应的数据

4. 内置指令

 
之前学过 v-on , v-bind , v-if , v-for ， 这里 就来 学习一下 vue 提供的其他 指令 .

 
回顾一下之前学过的 ：

4.1 v-text

从 v-text 名字 就可以知道 ， 这个指令是 将一个文本渲染到页面上 ， 下面演示一下下 ：

 
图二 ：

4.2 v-html

 
v-html ： 向指定节点中渲染 含 html 结构的内容 .

4.3 v-cloak

4.4 v-once

4.5 v-pre