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

来源：广州IT培训学院时间：2022/1/18 14:43:39

　　在前端开发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事件中再同步数据。具体使用操作如下：

　　

　　2⃣️ .number

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

　　

　　3⃣️ .trim

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

　　

　　三、按键修饰符

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

　　1、v-on:keyup

　　v-on:keyup :允许为 v-on 在监听键盘事件时添加按键修饰符，【关注尚硅谷，轻松学IT】如果用全部的按键别名，需要开发者记住所有的 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 修饰符允许控制由的系统修饰符组合触发的事件。

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/1980/news/477542/违者必究！ 以上就是广州IT培训学院 小编为您整理 前端开发之Vue事件修饰符和按键修饰符的全部内容。