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>所以,事件修饰符可以用来:
- 阻止事件冒泡和默认行为。
- 添加捕获或只触发一次的事件监听器。
- 以 { passive: true } 模式添加事件监听器。