Vue.js 修饰符总结

事件修饰符

  • .stop 阻止事件传播。等价于 event.stopPropagation()
  • .prevent 阻止默认行为。等价于 event.preventDefault()
  • .passive 执行默认行为。
  • .capture 捕获过程监听,先执行父级的函数,再执行子级的触发函数(一般用法)。
  • .self if (event.target !== event.currentTarget) return;
  • .once 只执行一次。

示例代码:

1
<!-- 阻止单击事件继续传播 -->
2
<a v-on:click.stop="doThis"></a>
3
4
<!-- 提交事件不再重载页面 -->
5
<form v-on:submit.prevent="onSubmit"></form>
6
7
<!-- 修饰符可以串联 -->
8
<a v-on:click.stop.prevent="doThat"></a>
9
10
<!-- 只有修饰符 -->
11
<form v-on:submit.prevent></form>
12
13
<!-- 添加事件监听器时使用事件捕获模式 -->
14
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
15
<div v-on:click.capture="doThis">...</div>
16
17
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
18
<!-- 即事件不是从内部元素触发的 -->
19
<div v-on:click.self="doThat">...</div>

备注:

1
current.target 是指事件绑定的元素。
2
target 是指引起事件触发的元素。

按键修饰符

  • .enter 按键是 Enter 时触发。
  • .tab
  • .delete 捕获“删除”和“退格”键。
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

1
<input v-on:keyup.page-down="onPageDown">

在上述示例中,处理函数只会在 $event.key 等于 PageDown 时被调用。

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

使用 keyCode 特性:

1
<input v-on:keyup.13="submit">

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

  • .ctrl
  • .alt
  • .shift
  • .meta

示例代码:

1
<!-- Alt + C -->
2
<input @keyup.alt.67="clear">
3
4
<!-- Ctrl + Click -->
5
<div @click.ctrl="doSomething">Do something</div>

.exact(精确) 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

1
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
2
<button @click.ctrl="onClick">A</button>
3
4
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
5
<button @click.ctrl.exact="onCtrlClick">A</button>
6
7
<!-- 没有任何系统修饰符被按下的时候才触发 -->
8
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

  • .left
  • .right
  • .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

拓展

为什么在 HTML 中监听事件?

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:

  1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

  2. 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

  3. 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何清理它们。