vue 事件处理器中的修饰符作用：修饰符可以更精细地控制 DOM 事件的行为。 1. .stop：阻止事件冒泡作用：停

作用：修饰符可以更精细地控制 DOM 事件的行为。

1. `.stop`：阻止事件冒泡

作用：停止事件冒泡（阻止事件向上级元素传播）。
示例：点击按钮时，不会触发外层 div 的点击事件。

<div @click="handleDivClick">
  <button @click.stop="handleButtonClick">点击我</button>
</div>

等价原生 JS：event.stopPropagation()

2. `.prevent`：阻止默认行为

作用：阻止元素的默认行为（如表单提交后刷新页面）。
示例：表单提交时不会刷新页面。

<form @submit.prevent="handleSubmit">
  <button type="submit">提交</button>
</form>

等价原生 JS：event.preventDefault()

3. `.self`：仅当事件源是自身时触发

作用：只有事件直接发生在当前元素（而非子元素冒泡）时才会触发。
示例：点击子元素不会触发外层 div 的事件，只有点击 div 自身才会触发。

<div @click.self="handleDivClick">
  <button>子按钮</button>
</div>

4. `.capture`：使用捕获模式

作用：在事件捕获阶段处理事件（默认是冒泡阶段）。
示例：父元素的事件在捕获阶段触发，早于子元素的冒泡事件。

<div @click.capture="handleParentClick">
  <button @click="handleChildClick">子按钮</button>
</div>

点击按钮时，先执行 handleParentClick，再执行 handleChildClick。

5. `.once`：事件只触发一次

作用：事件处理函数只会执行一次，之后自动解绑。
示例：按钮点击一次后失效。

<button @click.once="handleClick">仅执行一次</button>

6. `.passive`：优化滚动性能

作用：提升移动端滚动事件的性能，表示处理函数不会调用 preventDefault()。
示例：优化触摸滚动行为，通常与 @touchmove 或 @scroll 结合使用。

<div @touchmove.passive="handleTouchMove">滑动区域</div>

注意：.passive 和 .prevent 不能共用（逻辑冲突）。

修饰符顺序与组合

顺序影响结果：

<!-- 1. 阻止所有点击的默认行为 -->
<a @click.prevent.self href="#">链接</a>

<!-- 2. 仅阻止元素自身的点击默认行为 -->
<a @click.self.prevent href="#">链接</a>

组合使用：

<!-- 同时阻止冒泡和默认行为 -->
<button @click.stop.prevent="handleClick">按钮</button>

总结

修饰符	作用	常用场景
`.stop`	阻止事件冒泡	嵌套元素的事件隔离
`.prevent`	阻止默认行为	表单提交、链接跳转
`.self`	仅当事件源是自身时触发	避免冒泡导致父元素误触发
`.capture`	在捕获阶段处理事件	需要父级先于子级触发时
`.once`	事件只触发一次	一次性操作（如提交表单）
`.passive`	提升滚动性能，不阻塞渲染	移动端滚动、触摸事件优化

通过合理使用修饰符，可以更高效地控制事件流和行为，提升交互体验和性能。

其他特殊修饰符

除了之前提到的六个核心事件修饰符（.stop、.prevent、.self、.capture、.once、.passive），Vue 还提供了一些其他修饰符来更精细地处理事件，尤其是在处理键盘事件、鼠标事件和系统按键组合时。以下是这些扩展修饰符的详细介绍：

1. 按键修饰符

用于监听特定键盘按键的事件（如 @keyup、@keydown），直接通过按键名或键码绑定：

常见按键别名：
.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right

示例：

<!-- 按下回车键时触发 -->
<input @keyup.enter="submitForm">

<!-- 按下 Esc 键时触发 -->
<input @keyup.esc="clearInput">

自定义按键别名：
可以通过 Vue.config.keyCodes 自定义按键别名：

Vue.config.keyCodes = {
  f1: 112,    // 将 F1 键的键码映射为 `f1`
  mediaPlayPause: 179
};

<input @keyup.f1="openHelp">

2. 系统修饰键

用于监听需要与系统按键（如 Ctrl、Alt、Shift、Meta）组合的事件：

修饰符：
.ctrl、.alt、.shift、.meta（Windows 的 ⊞ 键或 Mac 的 ⌘ 键）

示例：

<!-- 按下 Ctrl + 点击时触发 -->
<button @click.ctrl="handleCtrlClick">Ctrl + 点击</button>

<!-- 按下 Alt + C 时触发 -->
<input @keyup.alt.67="copyText">

注意：
系统修饰键需与其他按键或事件组合使用，单独按下修饰键不会触发。

3. 鼠标按钮修饰符

用于监听特定鼠标按钮的点击事件（如左键、右键）：

修饰符：
.left、.right、.middle

示例：

<!-- 右键点击时触发 -->
<div @click.right="showContextMenu">右键菜单</div>

4. `.exact` 修饰符

精确控制系统修饰符的组合，确保仅当指定按键被按下时触发：

场景：避免同时按下其他修饰键时误触发。

示例：

<!-- 仅当按下 Ctrl 且没有其他系统键时触发 -->
<button @click.ctrl.exact="handleCtrlOnly">仅 Ctrl</button>

<!-- 没有任何系统修饰键时触发 -->
<button @click.exact="handleNoModifier">无修饰键</button>

5. 其他特殊修饰符

`.native`

监听组件根元素的原生事件（用于自定义组件）：

<MyComponent @click.native="handleNativeClick"></MyComponent>

`.sync`（双向绑定语法糖，Vue 2.x）

简化父子组件间的双向数据绑定：

<ChildComponent :title.sync="pageTitle"></ChildComponent>

等价于：

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event"></ChildComponent>

总结：Vue 修饰符分类

类型	修饰符示例	作用场景
事件流	`.stop`、`.prevent`、`.capture`	控制事件冒泡、默认行为
触发条件	`.self`、`.once`、`.exact`	限制触发源、次数、精确条件
性能优化	`.passive`	提升滚动性能
键盘事件	`.enter`、`.tab`、`.ctrl`	监听特定按键或组合
鼠标事件	`.left`、`.right`	区分鼠标按键
组件通信	`.native`、`.sync`（Vue 2）	自定义组件事件监听与数据同步

何时使用这些修饰符？

表单交互：用 .prevent 阻止提交刷新，用 .enter 监听回车键。
嵌套组件：用 .stop 或 .self 隔离事件冒泡。
快捷键：用 .ctrl.enter 实现组合键提交。
性能敏感场景：滚动列表用 .passive 提升流畅度。
右键菜单：用 .right 监听右键点击。

合理利用修饰符可以让代码更简洁，同时避免手动处理 event 对象的复杂性。

vue 事件处理器中的修饰符

1. .stop：阻止事件冒泡

2. .prevent：阻止默认行为

3. .self：仅当事件源是自身时触发

4. .capture：使用捕获模式

5. .once：事件只触发一次

6. .passive：优化滚动性能