Vue 常用的修饰符有哪些？它们的应用场景是什么？

介绍 Vue 框架中常用修饰符的种类及其应用场景，帮助理解如何优化事件和数据绑定。

Vue 中等修饰符事件处理 Modifiers

Vue 中常用的修饰符分为事件修饰符、表单修饰符、按键修饰符、系统修饰键等类别，主要用于自定义事件行为和数据绑定。每个修饰符以点（.）后缀形式添加到指令如 v-on 或 v-model 中，优化特定交互场景，详情如下：

用于 v-on 或 @ 指令处理事件行为。

.stop: 阻止事件冒泡，应用场景：元素嵌套时避免触发父元素事件，如弹出层点击关闭按钮。
```
<button @click.stop="closePopup">关闭</button>
```
.prevent: 阻止默认行为，应用场景：防止表单自动提交或页面跳转，表单保存按钮使用避免重新加载。
```
<form @submit.prevent="saveForm"></form>
```
.capture: 添加事件捕获模式，应用场景：事件从外向内处理，如全局快捷键监听优先响应键盘事件。
```
<div @click.capture="handleGlobalClick">全局事件</div>
```
.self: 只触发本元素事件（非子元素），应用场景：过滤按钮组的无效点击事件，避免误操作。
```
<div @click.self="selfAction">仅响应自身点击</div>
```
.once: 事件触发一次，应用场景：单次提交按钮，防止重复触发提交。
```
<button @click.once="submitOnce">提交一次</button>
```
.passive: 提升性能（滚动事件），应用场景：移动端页面滚动优化，确保不会阻止默认滚动。
```
<div @scroll.passive="handleScroll">滚动区</div>
```

用于 v-model 指令优化输入数据处理。

.lazy: 只在 change 事件同步数据（而非 input），应用场景：输入框失去焦点后处理数据，如节省渲染负担。
```
<input v-model.lazy="userName" />
```
.number: 输入值转为数值类型，应用场景：年龄框强制数字存储，避免字符串格式判断错误。
```
<input v-model.number="userAge" />
```
.trim: 去除首尾空格，应用场景：昵称输入标准化清洁处理，规避前端显示异常。
```
<input v-model.trim="fullName" />
```

用于键盘和鼠标事件定制控制。

.enter: Enter 键触发，应用场景：提交表单回车快速响应。
```
<input @keyup.enter="submitForm" />
```
.ctrl, .alt, .meta（系统修饰键）：组合键响应，应用场景：实现快捷键操作（如 Ctrl+C）。
```
<button @click.ctrl="copyText">复制</button>
```
鼠标按钮修饰符：如 .left, .right，应用场景：防止左侧按钮误删项触发右键菜单。
```
<button @click.right="showMenu">菜单按钮</button>
```