vue常用的事件修饰符

<think>我们正在讨论Vue的事件修饰符。事件修饰符是Vue为v-on指令提供的特殊后缀，用于处理DOM事件细节。 常用的事件修饰符包括： .stop - 调用 event.stopPropagation()，阻止事件冒泡 .prevent - 调用 event.preventDefault()，阻止默认行为 .capture - 添加事件侦听器时使用 capture 模式（即事件捕获阶段处理） .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调（即事件源是自身才触发） .once - 只触发一次回调 .passive - 以 { passive: true } 模式添加侦听器，提升移动端性能（尤其滚动性能） 此外，还有按键修饰符（如 .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right）和系统修饰键（如 .ctrl, .alt, .shift, .meta）等。 下面我们将详细说明这些事件修饰符的用法和场景。</think>### Vue 常用事件修饰符详解 事件修饰符是 Vue 为 `v-on` 指令提供的特殊后缀，用于简化常见 DOM 事件处理逻辑。以下是核心修饰符及其应用场景： --- #### **基础事件修饰符** 1. **`.stop`** - 阻止事件冒泡 ```html <button @click.stop="handleClick">点击不会向上冒泡</button> ``` 2. **`.prevent`** - 阻止默认行为 ```html <form @submit.prevent="onSubmit">阻止表单默认提交</form> ``` 3. **`.capture`** - 使用捕获模式（从外向内触发） ```html <div @click.capture="outer">外层先触发</div> ``` 4. **`.self`** - 仅当事件源是元素自身时触发（忽略子元素冒泡） ```html <div @click.self="onlySelf">子元素点击不会触发</div> ``` 5. **`.once`** - 事件只触发一次 ```html <button @click.once="oneTime">仅生效一次</button> ``` 6. **`.passive`** - 提升滚动性能（不阻塞主线程） ```html <div @scroll.passive="onScroll">移动端优化</div> ``` --- #### **按键修饰符** 7. **系统按键** ```html <!-- 组合键 --> <input @keyup.ctrl.enter="submit"> <!-- 精确按键 --> <input @keyup.exact.esc="close"> ``` 8. **常用按键别名** | 修饰符 | 对应按键 | |--------------|----------------------| | `.enter` | Enter 回车键 | | `.tab` | Tab 键 | | `.delete` | Delete / Backspace | | `.esc` | Esc 键 | | `.space` | 空格键 | | `.up`/`.down`| 上下方向键 | --- #### **鼠标修饰符** 9. **鼠标按键限定** ```html <div @click.middle="middleClick">中键点击</div> <div @click.right.prevent>禁用右键菜单</div> <!-- 其他：.left, .right, .middle --> ``` --- ### 修饰符链式调用 可串联使用多个修饰符： ```html <!-- 阻止冒泡 + 阻止默认行为 + 只触发一次 --> <a @click.stop.prevent.once="doSomething">链接</a> ``` --- ### 性能与场景对比 | 修饰符 | 典型场景 | 注意事项 | |--------------|--------------------------|--------------------------| | `.passive` | 移动端滚动事件 | 不能与 `.prevent` 共用 | | `.exact` | 精确控制系统修饰键组合 | 需 Vue 2.5+ | | `.once` | 一次性操作（如表单提交） | 解绑后不影响手动触发 | ---