目录

一、事件修饰符

二、按键修饰符

三、系统修饰键

四、表单修饰符

五、鼠标修饰符

六、特殊修饰符

七、自定义修饰符

使用建议

---

一、事件修饰符

<!-- 阻止冒泡 -->
<button @click.stop="handleClick">点击测试</button>

<!-- 阻止默认行为 -->
<form @submit.prevent="handleSubmit"></form>

<!-- 事件捕获模式 -->
<div @click.capture="captureHandler"></div>

<!-- 仅当event.target是元素自身时触发 -->
<div @click.self="selfHandler"></div>

<!-- 单次触发 -->
<button @click.once="onceHandler"></button>

<!-- 滚动事件的默认行为立即触发 -->
<div @scroll.passive="onScroll"></div>

注意：修饰符顺序影响执行顺序，例如：

• @click.prevent.self 先阻止默认再判断元素
• @click.self.prevent 先判断元素再阻止默认

二、按键修饰符

<!-- 回车键触发 -->
<input @keyup.enter="submit">

<!-- 删除键触发 -->
<input @keyup.delete="clear">

<!-- 方向键触发 -->
<input @keyup.left="moveLeft">

<!-- 精确控制组合键 -->
<button @click.ctrl.exact="ctrlClick">仅按Ctrl时触发</button>

支持按键别名：

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

三、系统修饰键

<!-- Ctrl + C 触发 -->
<input @keyup.ctrl.67="copy">

<!-- Alt + Enter 触发 -->
<input @keyup.alt.enter="specialSubmit">

<!-- Shift + 点击 -->
<div @click.shift="shiftClick"></div>

系统修饰键：

• .ctrl
• .alt
• .shift
• .meta (Windows对应⊞键，Mac对应⌘键)

四、表单修饰符

<!-- 延迟同步 -->
<input v-model.lazy="msg">

<!-- 自动转为数字 -->
<input v-model.number="age">

<!-- 去除首尾空格 -->
<input v-model.trim="username">

五、鼠标修饰符

<!-- 左键点击 -->
<div @mousedown.left="leftClick"></div>

<!-- 中键点击 -->
<div @click.middle="middleClick"></div>

<!-- 右键点击 -->
<div @contextmenu.right="rightMenu"></div>

六、特殊修饰符

<!-- 原生事件监听 -->
<component @click.native="nativeClick"></component>

<!-- 属性双向绑定（Vue2语法） -->
<ChildComponent :title.sync="pageTitle" />

七、自定义修饰符

// 全局自定义修饰符
app.config.globalProperties.$customModifier = (el, binding) => {
  // 自定义处理逻辑
}

使用建议

1. 组合修饰符时注意执行顺序：

<!-- 先阻止默认再停止冒泡 -->
<form @submit.prevent.stop></form>

1. 性能优化建议：

• 滚动事件建议配合.passive
• 频繁触发事件使用.lazy或.throttle

1. 调试技巧：

<!-- 查看事件对象 -->
<button @click.shift.alt="(e) => console.log(e)">调试</button>

通过合理使用修饰符，可以显著提升代码简洁性和事件处理效率。建议根据实际场景选择最合适的修饰符组合。