Vue 提供了丰富的修饰符（Modifiers），它们是以“点 + 后缀”的形式（如 .prevent）附加在指令后面的特殊后缀，用于以声明式的方式修改指令的默认行为。以下是 Vue 中常用的修饰符及其应用场景：
一、事件修饰符（Event Modifiers）
用于 v-on 或 @ 绑定的事件，简化 DOM 事件处理。
| 修饰符 | 作用 | 应用场景 |
|---|---|---|
.stop | 阻止事件冒泡（调用 event.stopPropagation()） | 点击子元素时不希望触发父级元素的点击事件 |
.prevent | 阻止默认行为（调用 event.preventDefault()） | 表单提交时阻止页面刷新，或链接点击不跳转 |
.capture | 使用事件捕获模式（事件从外向内触发） | 特定场景下控制事件触发顺序 |
.self | 只有当事件在该元素本身（非子元素）触发时才触发回调 | 实现“点击元素外部关闭弹窗”等需求 |
.once | 事件只触发一次，之后自动解绑 | 一次性操作，如首次加载提示 |
.passive | 以被动模式添加事件监听器，提升滚动性能 | 滚动/触摸事件中避免阻塞页面渲染，常与 .prevent 冲突 |
✅ 示例：
<form @submit.prevent="handleSubmit">
<button @click.stop="doSomething">按钮</button>
</form>
<div @click.self="hideModal" class="modal">弹窗内容</div>二、按键修饰符（Key Modifiers）
用于监听键盘事件（keyup、keydown），指定特定按键触发。
| 修饰符 | 对应按键 |
|---|---|
.enter | Enter 键 |
.tab | Tab 键 |
.delete | Delete 和 Backspace 键 |
.esc | Escape 键 |
.space | 空格键 |
.up / .down / .left / .right | 方向键 |
✅ 示例：
<!-- 回车键提交 -->
<input @keyup.enter="submitForm" />
<!-- 按下 Esc 关闭弹窗 -->
<div @keyup.esc="closeModal">弹窗</div>💡 支持自定义键码：@keyup.13="submit"（但推荐使用语义化名称）
三、系统按键修饰符（System Modifier Keys）
用于组合键操作，需与鼠标或键盘事件配合使用。
| 修饰符 | 说明 |
|---|---|
.ctrl | Ctrl 键 |
.alt | Alt 键 |
.shift | Shift 键 |
.meta | Mac 上的 Command 键，Windows 上的 Win 键 |
⚠️ 注意：单独使用如 @click.ctrl 是无效的，必须配合其他按键或鼠标事件。
✅ 示例：
<!-- Ctrl + 点击 -->
<button @click.ctrl="onCtrlClick">Ctrl Click</button>
<!-- Alt + 回车 -->
<input @keyup.alt.enter="save" />🔥 .exact 修饰符：精确控制组合键
<!-- 有且仅有 Ctrl 被按下时才触发 -->
<button @click.ctrl.exact="onCtrlOnly">Only Ctrl</button>四、鼠标按键修饰符
用于 v-on 的鼠标事件，限定特定鼠标键触发。
| 修饰符 | 对应按键 |
|---|---|
.left | 左键点击 |
.right | 右键点击 |
.middle | 中键点击 |
✅ 示例：
<button @click.right="showContextMenu">右键菜单</button>五、表单输入修饰符（v-model modifiers）
用于 v-model，影响数据绑定的行为。
| 修饰符 | 作用 | 应用场景 |
|---|---|---|
.lazy | 将 input 事件改为 change 事件同步 | 减少频繁更新，如搜索框防抖前优化 |
.number | 自动将输入值转换为数字类型 | 输入框期望接收数字，避免字符串类型 |
.trim | 自动过滤用户输入的首尾空格 | 用户名、邮箱等输入去空格处理 |
✅ 示例：
<input v-model.number="age" type="number" />
<input v-model.trim="username" />
<input v-model.lazy="searchText" />总结
| 类别 | 常用修饰符 | 主要用途 |
|---|---|---|
| 事件修饰符 | .stop, .prevent, .once, .self | 控制事件行为，避免冒泡/默认行为 |
| 按键修饰符 | .enter, .esc, .space | 监听特定按键 |
| 系统修饰符 | .ctrl, .alt, .shift | 组合键操作 |
| 鼠标修饰符 | .left, .right | 区分鼠标按键 |
| v-model 修饰符 | .lazy, .number, .trim | 优化表单输入处理 |
合理使用修饰符可以让模板更简洁、逻辑更清晰，是 Vue 声明式编程优势的重要体现。
THE END
