Vue 学习笔记 02：事件修饰符

#事件修饰符

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 } 模式 添加侦听器