#事件修饰符
Vue 为 v-on
/ @
绑定事件提供了修饰符,通过 .
来调用修饰符
.stop
阻止事件 冒泡,调用event.stopPropagation()
<a @click.stop="fn()">click me</a>
.preven
阻止 默认 行为,调用event.preventDefault()
<a @click.prevent="fn()">click me</a>
<!-- 支持链式调用 -->
<a @click.stop.prevent="fn()">click me</a>
.capture
在 捕获 阶段中监听事件(capture模式),默认为 冒泡 阶段中监听事件
<a @click.capture="fn()">click me</a>
.self
只有直接绑定在该元素上的事件才执行,跳过冒泡事件和捕获事件
<a @click.self="fn()">click me</a>
-
.{keyCode | keyAlias}
只当事件是从特定键触发时才触发回调。常用键别名:
.enter
、.tab
、.delete
、.esc
、.space
、.up
、.down
、.left
、.right
自定义按键别名:
Vue.config.keyCodes.home = 36
<!-- 键别名 -->
<input @keyup.enter="fn()">
<!-- 键代码,对应 keyCode -->
<input @keyup.13="fn()">
-
.native
给 Vue 组件绑定原生事件 -
.once
只触发一次回调。 -
.left
(2.2.0) 只当点击 鼠标左键 时触发。 -
.right
(2.2.0) 只当点击 鼠标右键 时触发。 -
.middle
(2.2.0) 只当点击 鼠标中键 时触发。 -
.passive
(2.3.0) 以 { passive: true } 模式 添加侦听器