1.Vue2.0指令+过滤器+侦听器+计算属性
# 什么是 vue
1. 构建用户界面
- 用 vue 往 html 页面中填充数据，非常的方便
2. 框架
- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
- 要学习 vue，就是在学习 vue 框架中规定的用法！
- vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库
- 只有把上面罗列的内容掌握以后，才有开发 vue 项目的能力！
# vue 的两个特性
1. 数据驱动视图：
- 数据的变化会 驱动视图 自动更新
- 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！
2. 双向数据绑定：
> 在网页中，form 表单负责 采集数据，Ajax 负责 提交数据。
- js 数据的变化，会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中
> 注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）
# vue 使用基本步骤
1 导入 vue.js 的 script 脚本文件
2 在页面中声明一个将要被 vue 所控制的 DOM 区域 3 创建 vm 实例对象(vue 实例对象)
{{ username }}
# vue 指令（模板语法）
## 1. 内容渲染指令
1. v-text 指令的缺点：会覆盖元素内部原有的内容！
2. {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
3. v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！
{{ info }}
4. 支持JavaScript简单语法
## 2. 属性绑定指令
> 注意：插值表达式只能用在元素的 内容节点 中，不能用在元素的 属性节点 中！
-
在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；
-
简写是英文的 `:`
-
在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：
这是一个 div
## 3. 事件绑定指令
1. v-on: 简写是 @
2. 语法格式为：
//不传参 methods: { add() { // 在方法中可以通过 this 访问到 data 中的数据 this.count += 1 } } //传参 methods: { add(n) { // 在方法中可以通过 this 访问到 data 中的数据 this.count += n } }
3. $event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：
methods: { add(n, e) { // 如果在方法中要修改 data 中的数据，可以通过 this 访问到 this.count += 1 } }
4. 事件修饰符：
-
.prevent 阻止默认行为
链接< /a >< /a >< /a >< /a >< /a >< /a >< /a >
-
.stop 阻止冒泡
-
.capture 以捕获模式触发当前的事件处理函数(少用）
-
.once 绑定的事件只触发一次（少用）
-
.self 只有在 event.target 是当前元素自身时触发事件处理函数(少用
## 4. v-model 指令（数据双向绑定指令）
1. input 输入框中使用
- type="radio"
- type="checkbox"
- type="xxxx"
2. textarea 中使用
3. select 中使用
为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是:
## 5. 条件渲染指令
1. v-show 的原理是：动态为元素添加或移除 `display: none` 样式，来实现元素的显示和隐藏
- 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
- 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好
> 在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！
3. v-if v-else -if 指令在使用的时候，有两种方式：
- 直接给定一个布尔值 true 或 false
被 v-if 控制的元素
- 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏
良好
＃＃ 6.列表渲染指令
v-for 列表渲染指令用来基于一个数组来循环渲染一个列表结构，如下：
- v-for 的索引：
v-for 还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items，示例代码如下:
- 注意：
为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲 染的性能。此时，需要为每项提供一个唯一的 key 属性(官方建议）！
小结及小结案例：
小结：
1 能够知道 vue 的基本使用步骤
- 导入 vue.js 文件
- new Vue() 构造函数，得到 vm 实例对象
- 声明 el 和 data 数据节点
- MVVM 的对应关系
2 掌握 vue 中常见指令的基本用法
- 插值表达式、v-bind、v-on、v-if 和 v-else
- v-for 和 :key、v-model
案例：
案例页面：
代码部分：
查看代码
查看代码
品牌列表案例
添加品牌
#
品牌名称
状态
创建时间
操作
{{ item.id }}
{{ item.name }}
{{ item.time }}
删除
# 过滤器
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。
在企业级项目开发中:
- 如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
- 如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
## 过滤器的注意点
1. 要定义到 filters 节点下，**本质是一个函数**
2. 在过滤器函数中，**一定要有 return 值**
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“**就近原则**”，调用的是”私有过滤器“
## 过滤器使用的地方
过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定,例如：
## 私有过滤器的定义
在创建 vue 实例期间，可以在 filters 节点中定义私有过滤器，它只能在当前 vm 实例所控制的 el 区域内使用。示例：
## 全局过滤器的定义
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器:
## 调用多个过滤器
## 过滤器参数
# watch 侦听器
## 侦听器的格式
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
1. 方法格式的侦听器
+ 缺点1：无法在刚进入页面的时候，自动触发！！！
+ 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！
语法：
2. 对象格式的侦听器
+ 好处1：可以通过 **immediate** 选项，让侦听器自动触发！！！
+ 好处2：可以通过 **deep** 选项，让侦听器深度监听对象中每个属性的变化（深度侦听）！！！
启用immediate选项：
查看代码
启用deep选项：
查看代码
# 计算属性
特点：
1. 定义的时候，要被定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可
好处：
1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！
用法：
计算属性的方法写在 computed 节点下，最终return得到一个属性值。这个动态计算出来的属性值可以被 模板结构 或 methods 方法使用。示例代码如下:
查看代码
R：
G：
B：
{{ rgb }}