Vue2 (一)：指令与过滤器

前言

想必大家都听说过目前国内比较流行的前端框架-Vue

Vue是一套用于构建用户界面的渐进式框架，该框架被设计为可以自底向上逐层应用，与其他大型框架大为不同。该框架核心库只关注视图层，既易于上手，又能通过npm包管理器与第三方库整合。

虽然Vue官网有比较全面的使用文档，但对于我这种初学者来说，有时阅读起来还是有些吃力。

因此，从本篇文章开始,我将在之后陆陆续续给大家整理分享Vue2的核心知识干货, 供自己和大家在开发使用时查阅。

本篇概要

1. 什么是Vue？
2. Vue的两大特性及实现原理
3. Vue的六大指令
4. Vue的过滤器

一、什么是Vue？

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端*框架。

1、构建用户界面

用 vue 往 html 页面中填充数据，非常的方便

2、框架

框架是一套现成的解决方案，程序员若想使用只能遵守框架的规范，去编写自己的业务功能 学习 vue，就是在学习 vue 框架中规定的用法 vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库等都是框架的一部分

二、vue 的两个特性

1、数据驱动视图

概念

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来

2、双向数据绑定

概念

js 数据的变化，会被自动渲染到页面上 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值

3、实现原理--MVVM

概念

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel， 它把每个 HTML 页面都拆分成了这三个部分，如图所示：

在 MVVM 概念中：

Model 表示当前页面渲染时所依赖的数据源。 View 表示当前页面所渲染的 DOM 结构。 ViewModel 表示 vue 的实例，它是 MVVM 的核心。

工作原理

ViewModel 为 MVVM 的核心

它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

• 当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
• 当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

三、Vue的基本使用

步骤

① 导入 vue.js 的 script 脚本文件 ② 在页面中声明一个将要被 vue 所控制的 DOM 区域

③ 创建 vm 实例对象（vue 实例对象）

如下图所示

四、指令

1.概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

2.类型

vue 中的指令按照不同的用途可以分为如下 6 大类：

① 内容渲染指令

② 属性绑定指令

③ 事件绑定指令

④ 双向绑定指令

⑤ 条件渲染指令

⑥ 列表渲染指令

2.1 内容渲染指令

（1）v-text 指令

缺点：会覆盖元素内部原有的内容

（2）{{ }} 插值表达式：只是内容的占位符，不会覆盖原有的内容

专门用来解决 v-text 会覆盖默认文本内容的问题

（3）v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容

2.2 属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

• 使用 v-bind: 指令，为元素的属性动态绑定值；
• 简写是英文的 :

• 在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

<div :title="'box' + index">这是一个 div</div>

加上: 后，“” 中的表达式都按照 js表达式编译，因此字符串类型数据要加上单引号

2.3 事件绑定指令

（1）v-on: 简写是 @

（2）通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明

（3）语法格式为：

<button @click="add"></button>

methods: {
   add() {
      // 如果在方法中要修改 vue实例data 中的数据，可以通过 this 访问到
            this.count += 1
   }
}

（4）$event 的应用场景：如果默认的事件参数对象 e 被覆盖了，则可以手动传递一个$event

（5）事件修饰符：

.prevent 阻止默认跳转行为

<a @click.prevent="xxx">链接</a>

.stop 组织冒泡

<button @click.stop="xxx">按钮</button>

.capture 以捕获模式触发当前的事件处理函数

.onece 绑定的事件只触发一次

.self 只有在event.target是当前元素自身时触发

（6）按键修饰符：

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符， 例如：

2.4 双向绑定指令

（1）v-model

data中的对象与绑定的输入框中的内容时刻保持一致

辅助开发者在不操作 DOM 的前提下，快速获取表单的数据

<div>
<input v-model="username" />
<input v-model="password" />
</div>

const vm = new Vue(){
  data:{
    username: '',
    password: ''
  }
}

（2） v-model 指令的修饰符

//.number 自动将用户的输入值转为数值类型  
<input v-model.number="age" />

//.trim 自动过滤用户输入的首尾空白字符  
<input v-model.trim="msg" />

//.lazy 在“change”时而非“input”时更新,类似“防抖”   
<input v-model.lazy="msg" />

2.5 条件渲染指令

（1）v-show

原理：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏

如果要频繁的切换元素的显示状态，用 v-show 性能会更好

（2）v-if

原理：每次动态创建或移除元素，实现元素的显示和隐藏

如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

v-if 指令在使用的时候，有两种方式：

直接给定一个布尔值 true 或 false

<p v-if="true">被 v-if 控制的元素</p>

给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

<p v-if="type === 'A'">良好</p>

（3） v-else

<div v-if="Math.random() > 0.5">
      随机数大于 0.5
</div>
    
<div v-else>
      随机数小于或等于 0.5
</div>

（4）v-else-if

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'A'">良好</div>
<div v-else-if="type === 'A'">一般</div>
<div v-else="type === 'A'">差</div>

2.5 列表渲染指令

（1）v-for

辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 item in items 形式的特殊语法，其中： ⚫ items 是待循环的数组 ⚫ item 是被循环的每一项

（2） v-for 中的索引

v-for 指令还支持一个可选的第二个参数，即当前项的索引。

语法格式为 (item, index) in items，item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist

示例代码如下

（3）使用 key 维护列表的状态

原因

1、当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种 默认的性能优化策略，会导致有状态的列表无法被正确更新。 2、为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲 染的性能。此时，需要为每项提供一个唯一的 key 属性：

（4） key 的注意事项

① key 的值只能是字符串或数字类型 ② key 的值必须具有唯一性（即：key 的值不能重复） ③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性） ④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性） ⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

五、过滤器

1、概念

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。 过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：

2、私有过滤器

（1）在插值表达式或v-bind属性中使用 管道符

（2）在vue实例的 filters 节点中定义过滤方法

3、全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。

如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

4、过滤器的注意点

1. 要定义到 filters 节点下，本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“

总结

今天就先分享到这里，看完是不是发现干货满满呢？

如果觉得本篇文章对你们有用的话，希望各位看官们可以点赞支持一下哦！

之后我将为你们带来Vue生命周期、侦听器、计算属性等知识的整理，欢迎大家关注支持！