有过JS事件代码开发经验的一定对event.preventDefault()（阻止节点默认行为）和event.stopPropagation()（阻止事件冒泡）不陌生，这是处理DOM事件时很常见的方法，vue将其封装成简短易用的事件修饰符，可以后缀于事件名称之后。
事件修饰符v-on
| 名称 |
可用版本 |
可用事件 |
说明 |
| .stop |
所有 |
任意 |
当事件触发时，阻止事件冒泡 |
| .prevent |
所有 |
任意 |
当事件触发时，阻止元素默认行为 |
| .capture |
所有 |
任意 |
当事件触发时，阻止事件捕获 |
| .self |
所有 |
任意 |
限制事件仅作用于节点自身 |
| .once |
2.1.4以上 |
任意 |
事件被触发一次后即解除监听 |
| .passive |
2.3.0以上 |
滚动 |
移动端，限制事件用不调用preventDefault()方法 |
例如@submit.prevent="submit"
按键修饰符@keyup
| 别名修饰符 |
键值修饰符 |
对应按键 |
| .delete |
.8/.46 |
回格 / 删除 |
| .tab |
.9 |
制表 |
| .enter |
.13 |
回车 |
| .esc |
.27 |
退出 |
| .space |
.32 |
空格 |
| .left |
.37 |
左 |
| .up |
.38 |
上 |
| .right |
.39 |
右 |
| .down |
.40 |
下 |
例如： @keyup.13="console.log($event)"或者@keyup.enter=""
鼠标修饰符
| 修饰符 |
可用版本 |
对应按键 |
| .left |
2.2.0 以上 |
左键 |
| .right |
2.2.0 以上 |
右键 |
| .middle |
2.2.0 以上 |
中键 |
组合修饰符
| 修饰符 |
可用版本 |
对应按键 |
| .ctrl |
2.1.0 以上 |
Ctrl键 |
| .alt |
2.1.0 以上 |
Alt键 |
| .shift |
2.1.0 以上 |
Shift键 |
| .meta |
2.1.0 以上 |
meta键（Windows系统键盘上为田键） |
网友评论