vue过滤器和修饰符

过滤器

概念

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。

注意事项

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

使用语法

 {{变量 | 过滤器名}}

 {{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

定义语法

  全局定义：

通过Vue提供的filter方法定义：Vue.filter()

参数：过滤器的名字和过滤器执行函数

 私有定义

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

 注意事项

1. 函数的第一个参数都是data，也就是我们要过滤的值。
2. 过滤器可以自定义一些参数。
3. 过滤器函数的返回值就是最终显示的值

键盘修饰符

　注册一个监听按键事件　　

1. 监听所有按键：v-on:keyup
2. 监听指定按键：v-on:keyup.按键码

　　自定义案件别名　　　

　　　　Vue.config.keyCodes.f1 = 112

自定义指令

　　　　全局定义：　Vue.directive()

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

2. 对象，里面包含三个钩子方法

 bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

 inserted 这个元素已经渲染到界面上之后执行

 update 当元素有更新的时候执行

3. 这三个方法的参数有哪些

 el：指令所绑定的元素，可以用来直接操作 DOM 。

 binding：一个对象，包含以下属性：

 name：指令名，不包括 v- 前缀。

 value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

 oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

　　　　私有定义：　directives:{}