Vue 学习笔记 —— 常用特性 ，不看绝对血亏，大佬手把手教你如何仿写出大厂的web

3.3 局部自定义命令

前面定义过的样子就相当于一个全局的自定义命令。因此有全局的定义，就有对应的局部自定义命令的定义。

我们直接在 一个 vue 实例当中定义 directives 属性即可。

因此我定义了两个方法，分别是聚焦，和颜色改变的方法

四、计算属性 （computed）

================================================================================

4.1 计算属性功能

首先计算属性和方法的使用基本差不多，但是计算属性也有它独有的特点

1. 对应比较复杂的运算逻辑，使用计算属性可以提高运行效率 （因为它还提供了缓存机制）

2. 计算属性是依赖于 data 当中的数据

3. 计算属性第一次计算会将结果缓存起来，第二次在运算的时候会将计算的记过直接取出来

4.2 计算属性的基本使用

下面以一个反转字符串为例，我们来看下综合运行的情况。

原生字符串：{{msg}}

反转字符串：{{msg.split('').reverse().join('')}}

计算属性测试

计算属性方法实现：{{reverseMessage}}

计算属性方法实现：{{reverseMessage}}

计算属性方法实现：{{reverseMessage}}

方法测试

方法实现反转字符串：{{reverseMsg()}}

方法实现反转字符串：{{reverseMsg()}}

方法实现反转字符串：{{reverseMsg()}}

4.3 演示效果

我们看下两个方法分别打印了几次

计算属性只打印了一次，只有第一次调用的时候才会打印。这也证明了计算属性在某方面确实性能比方法搞很多

五、侦听器 （watch）

============================================================================

侦听器简单的来说就是数据有变化就通知监听器所绑定的方法。

侦听器主要用来侦听属性

侦听器的关键字是 watch，使用起来和 计算属性差不多

5.1 侦听器的基本使用

接下来我们以一个用户姓 与 名 的拼接的小案例来演示侦听器的使用

名：

姓：

{{fullname}}

计算属性：{{fullName}}

5.2 侦听器小实例，用户验证小 demo

侦听器的使用情景一般在 ajax 验证用的比较多，接下来我们就以一个简单的用户验证为例演示 watch 的使用场景。

验证基本流程

1. 我们使用 v-modal 实现用户的双向绑定

2. 监听器用来监听用户输入的用户名的变化

3. 用户输入完毕，调用后台 接口 实现验证，这里简化操作，使用 定时器模拟 ‘验证’ 的操作。

4. 再将验证的结果返回给前台。

用户名：

六、过滤器（filters）

=============================================================================

6.1 过滤器的基本使用

首先，我们需要自定义一个过滤规则，然后在插值表达式中，加上过滤规则，就完成了过滤器的基本使用，我们将会在下面介绍过滤器的基本定义

使用场景：

1. 插值表达式

2. 属性绑定

过滤器的使用基本有三种方式

普通过滤{{msg | upper}}

级联操作：{{msg | lower | upper}}

全局属性：属性绑定

测试数据

竖杠右边的就是我们定义的过滤规则

6.2 全局过滤器

我们以首字母大小转换的为例，通过过滤器，将首字母变换大写，和小写来演示全局过滤器的使用

全局数据

首字母大写 {{msg | upper}}

首字母小写： {{msg | lower}}

级联操作：{{msg | lower | upper}}

全局属性：属性绑定

测试数据

级联操作：解释一下，级联操作，会以最终的为准，我这里是首字母先转换为小写，在转换为大写，所以看到的是大写的效果。

全局属性绑定：

6.3 局部过滤器

局部过滤器使用的对象是 filters，同其他的对象一样，都需要将结果返回

局部指令：反转字符串

{{msg | reversed}}