Vue 3 修饰符（Modifiers）

在 Vue 3 中，修饰符（Modifiers）是用于给指令（Directives）添加特殊行为的后缀，通过点符号 . 表示。它们可以简化常见的操作，让代码更简洁高效。

以下是 Vue 3 中常用的修饰符分类及示例：

1. 事件修饰符（Event Modifiers）

用于处理 DOM 事件的修饰符，最常用的有：

.stop：阻止事件冒泡
.prevent：阻止默认行为
.self：仅当事件在元素本身触发时才执行（不包括子元素）
.once：事件只触发一次
.passive：优化滚动性能，禁止使用 .prevent

vue

xml 复制代码

<template>
  <div @click="handleParent">
    <!-- 阻止冒泡 -->
    <button @click.stop="handleChild">点击</button>
    
    <!-- 阻止默认行为（如表单提交） -->
    <form @submit.prevent="handleSubmit"></form>
    
    <!-- 只触发一次 -->
    <button @click.once="handleClickOnce">只点一次</button>
  </div>
</template>

2. 按键修饰符（Key Modifiers）

用于监听特定键盘事件：

.enter：回车键
.tab：Tab 键
.delete：删除 / 退格键
.esc：ESC 键
.space：空格键
.up/.down/.left/.right：方向键

vue

xml 复制代码

<template>
  <!-- 按回车时触发 -->
  <input @keyup.enter="submitForm" />
  
  <!-- 按ESC时触发 -->
  <input @keyup.esc="clearInput" />
</template>

3. 系统修饰符（System Modifiers）

用于组合系统按键：

.ctrl
.alt
.shift
.meta（Windows 键或 Command 键）

vue

xml 复制代码

<template>
  <!-- Ctrl + 点击 -->
  <button @click.ctrl="doSomething">Ctrl+点击</button>
  
  <!-- Alt + 回车 -->
  <input @keyup.alt.enter="handleAltEnter" />
</template>

4. 鼠标按钮修饰符

.left：左键点击
.right：右键点击
.middle：中键点击

vue

xml 复制代码

<template>
  <div @click.right.prevent="showContextMenu">
    右键点击显示菜单
  </div>
</template>

5. v-model 修饰符

专门用于 v-model 指令：

.lazy：从 input 事件改为 change 事件同步（失去焦点时更新）
.number：将输入值转为数字
.trim：自动去除输入内容的首尾空格

vue

xml 复制代码

<template>
  <input v-model.lazy="msg" /> <!-- 失去焦点才更新 -->
  <input v-model.number="age" /> <!-- 转为数字类型 -->
  <input v-model.trim="username" /> <!-- 自动去除空格 -->
</template>

6. 表单修饰符

.camel：将绑定的属性名转为驼峰式命名（用于 SVG 元素）

vue

xml 复制代码

<template>
  <svg :view-box.camel="viewBox"></svg>
  <!-- 等价于 :viewBox -->
</template>

修饰符的组合使用

修饰符可以链式组合使用：

vue

xml 复制代码

<template>
  <!-- 阻止默认行为 + 只触发一次 -->
  <a href="https://example.com" @click.prevent.once="handleClick">链接</a>
</template>

这些修饰符极大地简化了常见的 DOM 操作逻辑，避免了在方法中编写大量重复的代码（如 event.preventDefault() 或 event.stopPropagation()）。