VUE键盘修饰符、过滤器、⾃定义指令及padStart()和padEnd()方法的使用

键盘修饰符

注册监听按键事件

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

注意：每个键盘按键都会对应⼀个键盘码，可以参照这个⽹站
https://www.hake.cc/tools/keyboardcode/

vue提供的按键别名

.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右

⾃定义按键别名

// 可以使⽤ `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

系统辅助按键

仅在以下修饰符对应的按键被按下时，才会触发⿏标或键盘事件监听器
.ctrl
.alt
.shift
.meta

过滤器

概念

Vue.js 允许你⾃定义过滤器，可被⽤作⼀些常⻅的⽂本格式化。过滤器可以⽤在两个地⽅：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。

作⽤

在我们⻚⾯显示值之前加⼀层过滤，展示我们过滤后的值

注意事项

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

使⽤语法

n {{变量 | 过滤器名}}
n {{变量 | 过滤器 | 另⼀个过滤器}} 可以同时使⽤多个过滤器，后⾯过滤器的data就是前⾯表达式传过来的值

定义语法

全局定义：

• 通过Vue提供的filter⽅法定义：Vue.filter()
• 参数：过滤器的名字或过滤器执⾏函数

私有定义

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

注意事项

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

⾃定义指令

全局定义

使⽤这个⽅法进⾏全局定义：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属性，这个属性是个对象
• ⾥⾯放的就是我们指令，这个对象键就是指令的名字，后⾯的对象就是指令的内容，和全局定义是⼀样的
• 简写直接写⼀个函数，函数名就是指令的名字，其他和全局定义是⼀样的。

padStart()和padEnd()方法的使用

用法：

• padStart() 方法用另一个字符串填充当前字符串（重复，如果需要的话），以便产生的字符串达到给定的长度。填充从当前字符串的开始（左侧）应用的。
• padEnd() 填充从当前字符串的末尾（右侧）应用的。
  语法：

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])

参数：

targetLength

• 当前字符串需要补全的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。

padString | 可选

• 补全字符串。如果字符串太长，使补全的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为“” 。

返回值：

• padStart() 方法在原字符串开头补全指定的补全字符串，直到目标长度所形成的新字符串。

• padEnd() 方法在原字符串末尾补全指定的补全字符串，直到目标长度所形成的新字符串。

适用场景：

• 常见用途是为数值补全指定位数

• 另一个用途是提示字符串格式