Vue.js 中的事件修饰符有哪些？

Vue.js 中的事件修饰符可以用来处理 DOM 事件细节。它们会被添加在事件名称之后,以半角句号 . 分隔。
常用的事件修饰符有:
.stop

• 阻止事件冒泡。
  .prevent
• 阻止默认事件。
  .capture
• 添加事件侦听器时使用 capture 模式。
  .self
• 只当事件在该元素本身(而不是子元素)触发时触发回调。
  .once
• 只触发一次回调。
  .passive
• 以 { passive: true } 模式添加侦听器 。

示例:

html
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 添加事件监听器,使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只有事件在该元素本身触发时才触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- 事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>  

<!-- 滚动事件的默认行为 (滚动行为) 将会立即触发  --> 
<!-- 而不会等待 `onScroll` 完成  -->
<div v-on:scroll.passive="onScroll">...</div>

所以,事件修饰符可以用来:

1. 阻止事件冒泡和默认行为。
2. 添加捕获或只触发一次的事件监听器。
3. 以 { passive: true } 模式添加事件监听器。