事件修饰符
Vue 为 v-on 提供了修饰符，让事件处理更简洁。
常用修饰符
HTML
<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThat"></button>
修饰符列表
| 修饰符 | 说明 |
|---|---|
.stop | 调用 event.stopPropagation() |
.prevent | 调用 event.preventDefault() |
.capture | 事件捕捉模式添加监听器 |
.self | 仅事件从自身触发时才触发 |
.once | 事件仅触发一次 |
.passive | 使用 passive 模式（不阻止滚动） |
.self 修饰符
HTML
<div @click.self="handleClick">
<button>点击我不会触发</button>
</div>
仅当点击 div 本身（非子元素）时触发。
.once 修饰符
HTML
<button @click.once="doThis">仅触发一次</button>
按键修饰符
HTML
<input @keyup.enter="submit" />
<input @keyup.escape="cancel" />
修饰符可以串联，按链式顺序调用。
要点总结
- 修饰符以
.开头，可以串联使用 - 常用修饰符：
.stop、.prevent、.self、.once - 按键修饰符用于键盘事件，如
.enter、.esc - 修饰符替代了在处理器中手动调用事件方法
📝 发现内容有误？点击此处直接编辑