修饰符,这里分为两块讲:事件修饰符,按键修饰符,
1,事件修饰符
- .stop:阻止单击事件继续传播
- .prevent:提交事件不再重载页面
- .capture:添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理,然后才交由内部元素进行处理
- .self: 只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的
- .once:点击事件将只会触发一次
- .passive:滚动事件的默认行为 (即滚动行为) 将会立即触发 ,而不会等待
onScroll
完成,这其中包含event.preventDefault()
的情况
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2,按键修饰符
- .enter => // enter键
- .tab => // tab键
- .delete (捕获“删除”和“退格”按键) => // 删除键
- .esc => // 取消键
- .space => // 空格键
- .up => // 上
- .down => // 下
- .left => // 左
- .right => // 右
常规用法
<!-- 也可用于简写语法 -->
<input @keyup.enter="submit">
网友评论