停止冒泡 //父子关系
.stop - 调用event.stopPropagation()。
阻止默认行为
//例如点击提交/a标签默认跳转
.prevent - 调用event.preventDefault()。
没有表达式
@submit.prevent
串联修饰符
//vue中支持组合写法
@click.stop.prevent
使用事件捕获模式
.capture
键修饰符
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
键别名
@keyup.enter=' ' //回车
键代码
@keyup.13 = ''
全部按键别名
别名 | 按键 |
---|---|
.enter | Enter(回车) |
.tab | Tab |
.delete | delete(删除)/BackSpace(退格) |
.esc | Esc(退出) |
.space | Space(空格键) |
.up | Up(上箭头) |
.down | Down(下箭头) |
.left | Left(左箭头) |
.right | Right(右箭头) |
.meta | windows中为window键,mac中为command键 |
组合按钮
//可以来实现仅在按下相应按键时才触发鼠标或键盘监听器
别名 | 按键 |
---|---|
.ctrl | ctrl |
.alt | alt |
.shift | shift |
例如:
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="do">Do</div>
对应按键数值
按键 | keyCode |
---|---|
0-9 | 48-57 |
a-z/A-Z | 65-90 |
F1-F24 | 112-135 |
BackSpace(退格) | 8 |
Tab | 9 |
Enter(回车) | 13 |
Caps_Lock(大写锁定) | 20 |
Space(空格键) | 32 |
Left(左箭头) | 37 |
up(上箭头) | 38 |
Right(右箭头) | 39 |
Down(下箭头) | 40 |
监听组件根元素的原生事件
.native
只有原生自身触发事件才执行
//冒泡 活捕获的都不执行
.self
点击回调只触发一次
.once
如有缺漏,欢迎各位大佬补存,谢谢~