在 Vue.js 中，修饰符（Modifiers）是通过点（.）语法附加到指令（如 v-model 或 v-on）上的特殊后缀，用于以声明式的方式改变指令的行为。它们主要分为表单修饰符（用于 v-model）和事件修饰符（用于 v-on）。
一、表单修饰符（用于 v-model）
这些修饰符用于处理用户输入时的常见需求，简化数据处理逻辑。
.lazy- 作用：将
v-model的同步时机从默认的input事件改为change事件。 - 场景：当输入框失去焦点（blur）或用户按下回车时才更新数据，减少频繁更新。
- 作用：将
.number- 作用：自动将用户的输入值转换为数字类型。
- 场景：当期望输入的是数字时，避免字符串类型。
- 注意：如果输入无法被
parseFloat()解析，则返回原始字符串。
.trim- 作用：自动过滤用户输入的首尾空白字符。
- 场景：处理用户名、邮箱等需要去除前后空格的输入。
二、事件修饰符（用于 v-on 或 @）
这些修饰符用于处理 DOM 事件的细节，如阻止默认行为、阻止事件冒泡等。
.stop- 作用：调用
event.stopPropagation()，阻止事件冒泡。
- 作用：调用
.prevent- 作用：调用
event.preventDefault()，阻止事件的默认行为。
- 作用：调用
.capture- 作用：使用事件捕获模式添加事件监听器（即事件从外层向内层触发）。
.self- 作用：只有当事件是从绑定元素本身触发时才触发回调（即
event.target是绑定元素本身）。 - 场景：防止事件从子元素冒泡上来触发。
- 作用：只有当事件是从绑定元素本身触发时才触发回调（即
.once- 作用：事件只触发一次，之后移除监听器。
.passive- 作用：以被动模式添加事件监听器。对于滚动等事件，可以提升滚动的流畅性。
- 注意：与
.prevent冲突，同时使用时.passive优先。
修饰符可以串联使用
修饰符可以连续使用，例如：
<!-- 阻止默认行为且只触发一次 -->
<a @click.prevent.once="doThis">链接</a>
<!-- 阻止冒泡且使用捕获模式 -->
<div @click.capture.stop="doThat">...</div>总结
| 类型 | 修饰符 | 作用 |
|---|---|---|
| 表单修饰符 | .lazy | input → change 事件同步 |
.number | 自动转为数字 | |
.trim | 自动去除首尾空格 | |
| 事件修饰符 | .stop | 阻止冒泡 |
.prevent | 阻止默认行为 | |
.capture | 使用捕获模式 | |
.self | 仅绑定元素本身触发 | |
.once | 只触发一次 | |
.passive | 被动监听，提升性能 |
这些修饰符让 Vue 的模板语法更加简洁和声明式，避免了在事件处理函数中手动调用 event.preventDefault() 或 event.stopPropagation()，提升了开发效率。
THE END
