vue过滤器和键盘修饰符

一、过滤器 

1、概念

      Vue.js 允许自定义过滤器，可被用作一些常见的文本格式化。

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

       过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。

2、作用：

      在页面显示之前加一层过滤，展示我们过滤后的值

3、注意事项：

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

4、使用语法

（1）{{变量 | 过滤器名}}

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

5、定义语法

（1）全局定义：

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

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

（2）私有定义：只能在它对应的视图中显示

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

   注意事项：

函数的第一个参数都是data，也就是我们要过滤的值。

过滤器可以自定义一些参数。

过滤器函数的返回值就是最终显示的值

代码：

body：

vue.js

二、键盘修饰符

1、注册一个监听按键事件

监听所有按键：v-on:keyup

监听指定按键：v-on:keyup.按键码

     注意：每个键盘按键都会对应一个键盘码

2、 使用按键别名：

      vue提供的按键别名：.enter：回车、.tab、.delete (捕获“删除”和“退格”键)、.esc：退出、.space： 空格、.up、.down、.left、.right

3、 自定义按键别名：

   例：Vue.config.keyCodes.f1 = 112

 

三、 自定义指令

1、全局定义

（1）使用这个方法进行全局定义：Vue.directive()

（2）参数：

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

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

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

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

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

       ③这三个方法的参数有哪些

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

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

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

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

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

 2、私有定义

 （1）实例里有个directives属性，这个属性是个对象

 （2）里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的

 （3）简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

代码解析：

输入框自动聚焦：