#Vue 修饰符大全 (Modifiers)

#1. 事件修饰符 (Event Modifiers)

Vue 提供了便捷的修饰符来处理常见的 DOM 事件细节。

#常用修饰符

• .stop：调用 event.stopPropagation()，阻止冒泡。
• .prevent：调用 event.preventDefault()，阻止默认行为（如提交表单）。
• .capture：使用事件捕获模式（即内部元素触发的事件先在此处理，然后才释放给内部元素）。
• .self：只有当 event.target 是元素本身时才触发回调（即冒泡过来的不触发）。
• .once：事件只会触发一次（触发后自动移除监听器）。
• .passive：告诉浏览器你不会调用 preventDefault()。主要用于提升移动端滚动性能（touch 事件）。

#键盘修饰符

• .enter, .tab, .delete, .esc
• .ctrl, .alt, .shift, .meta
• .exact：控制精确的系统修饰符组合。例如 @click.ctrl.exact 只有在仅按下 Ctrl 时触发。

#注意事项

• 顺序很重要：
  • @click.prevent.self 会阻止所有的点击（因为先 prevent 了）。
  • @click.self.prevent 只会阻止对元素自身的点击。
• .passive：不要把 .passive 和 .prevent 一起使用，因为 .passive 已经告诉浏览器不阻止默认行为了。

#2. 表单修饰符 (Form Modifiers)

#.lazy

默认情况下，v-model 在每次 input 事件触发后更新数据（实时更新）。 添加 .lazy 修饰符转为在 change 事件之后更新（只有光标离开或回车时更新）。

• 场景：防抖，减少高频更新。

#.number

自动将用户的输入值转为数值类型（使用 parseFloat）。

• 如果转换结果是 NaN，则返回原值。
• 注意：如果输入框 type="number"，Vue 会自动开启此行为。

#.trim

自动过滤用户输入的首尾空白字符。

• 场景：用户名、密码等严谨输入。

#自定义修饰符 (Vue 3)

组件可以支持自定义修饰符，例如 <MyComponent v-model.capitalize="text" />。 组件 props 中会接收到 modelModifiers: { capitalize: true }，从而在 emit 更新前处理数据。