Vue修饰符全解析
目录
一、事件修饰符
二、按键修饰符
三、系统修饰键
四、表单修饰符
五、鼠标修饰符
六、特殊修饰符
七、自定义修饰符
使用建议
一、事件修饰符
<!-- 阻止冒泡 -->
<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) => {// 自定义处理逻辑
}
使用建议
- 组合修饰符时注意执行顺序：
<!-- 先阻止默认再停止冒泡 -->
<form @submit.prevent.stop></form>
- 性能优化建议：
- 滚动事件建议配合
.passive - 频繁触发事件使用
.lazy或.throttle
- 调试技巧：
<!-- 查看事件对象 -->
<button @click.shift.alt="(e) => console.log(e)">调试</button>
通过合理使用修饰符，可以显著提升代码简洁性和事件处理效率。建议根据实际场景选择最合适的修饰符组合。