事件修饰符

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
修饰符替代了在处理器中手动调用事件方法

📝 发现内容有误？点击此处直接编辑