前端开发之 Vue 事件修饰符和按键修饰符

​

前言

在前端开发 Vue.js 中，关于事件和按键的使用也是比较常见的操作之一，那么与它们相关的事件修饰符和按键修饰符也是延伸前端培训的比较常用的操作。那么本篇博文就来分享一下关于 Vue.js 中事件修饰符和按键修饰符的使用。

一、事件修饰符

在 Vue.js 的事件处理程序中使用 v-指令中的 v-on 指令，是用来进行事件绑定的，也可用 @来代替。Vue.js 也为 v-on 指令提供了对应的一些事件修饰符，主要是通过由点”.”表示的指令后缀，来调用修饰符。v-on 指令常用的修饰符如下所示：

.stop — 调用 event.stopPropagation()； 阻止/停止冒泡。

.prevent — 调用 event.preventDefault(); 阻止/停止默认事件。

.capture — 添加事件侦听器时使用事件捕获(capture )模式。

.self — 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} — 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.once — 事件只触发一次。

注意：在使用修饰符的时候，顺序很重要，相应的代码会以同样的顺序产生。

二、v-model 修饰符

v-model 指令是用来实现双向数据绑定的，北京前端培训它也有自己的修饰符，具体如下所示：

1⃣️ .lazy

在默认情况下，v-model 同步输入框里的值和数据，可以通过这个修饰符，转变为在 change 事件中再同步数据。具体使用操作如下：

<input v-model.lazy="message”></input> 

2⃣️ .number

自动将输入框的输入值转化为数值类型，具体操作如下所示：

  <input v-model.number="message">

3⃣️ .trim

自动过滤输入框输入的首尾空格，具体操作如下所示：

  <input v-model.trim="message">

三、按键修饰符

在监听键盘事件的时候，经常需要监测常见的键值。Vue.js 允许为 v-on 在监听键盘事件时添加按键修饰符。

1、v-on:keyup

v-on:keyup :允许为 v-on 在监听键盘事件时添加按键修饰符，如果用全部的按键别名，需要开发者记住所有的 keyCode 是比较困难的事情，所以 Vue.js 为最常用的按键提供了别名，如下所示：

.enter （回车键）

.tab （tab 键）

.delete (获取 “删除” 和 “退格” 键)

.esc （esc 键）

.space （空格键）

.up （上键）

.down （下键）

.left （左键）

.right （右键）

注意：可通过全局 的 config.keyCodes 对象来自定义按键修饰符别名。

四、系统修饰键

1、可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器，如下所示：

• .ctrl

• .alt

• .shift

• .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。

2、.exact 修饰符允许控制由精确的系统修饰符组合触发的事件。

文章来源：程序猿 by 三掌柜

​