面试题：Vue 中有哪些表单修饰符和事件修饰符？

在 Vue 中，修饰符（Modifiers）是用来简化代码或增强功能的一种特殊语法。Vue 提供了多种修饰符，主要包括 表单修饰符 和 事件修饰符。以下是它们的详细说明和用法：

---

一、表单修饰符

表单修饰符用于简化表单输入的处理逻辑，常见的表单修饰符有：

1. .lazy

• 作用：将 v-model 的输入事件从 input 改为 change，即在输入框失去焦点或按下回车时才会更新数据。
• 示例：

  <input v-model.lazy="message" />
  <p>{{ message }}</p>

2. .number

• 作用：将用户输入的值自动转换为数字类型。
• 示例：

  <input v-model.number="age" type="number" />
  <p>{{ typeof age }}</p> <!-- 输出：number -->

3. .trim

• 作用：自动去除用户输入内容的首尾空白字符。
• 示例：

  <input v-model.trim="username" />
  <p>{{ username }}</p>

---

二、事件修饰符

事件修饰符用于简化事件处理逻辑，常见的事件修饰符有：

1. .stop

• 作用：阻止事件冒泡（相当于调用 event.stopPropagation()）。
• 示例：

  <div @click="parentClick">
    <button @click.stop="childClick">点击我</button>
  </div>

2. .prevent

• 作用：阻止默认事件行为（相当于调用 event.preventDefault()）。
• 示例：

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

3. .capture

• 作用：使用事件捕获模式（从外到内触发事件）。
• 示例：

  <div @click.capture="parentClick">
    <button @click="childClick">点击我</button>
  </div>

4. .self

• 作用：只有当事件是从触发事件的元素本身触发时才会执行回调。
• 示例：

  <div @click.self="parentClick">
    <button>点击我</button>
  </div>

5. .once

• 作用：事件只会触发一次。
• 示例：

  <button @click.once="doSomething">点击我</button>

6. .passive

• 作用：表示事件监听器不会调用 preventDefault()，通常用于优化滚动性能。
• 示例：

  <div @scroll.passive="onScroll">滚动区域</div>

7. .native

• 作用：监听组件根元素的原生事件。
• 示例：

  <my-component @click.native="handleClick"></my-component>

---

三、按键修饰符

按键修饰符用于监听特定的键盘按键事件。

1. 常用按键修饰符

• .enter：回车键
• .tab：Tab 键
• .delete：删除键
• .esc：Esc 键
• .space：空格键
• .up：上箭头键
• .down：下箭头键
• .left：左箭头键
• .right：右箭头键

2. 示例

<input @keyup.enter="submit" />

3. 自定义按键修饰符

可以通过 Vue.config.keyCodes 自定义按键修饰符。

Vue.config.keyCodes.f1 = 112; // 将 F1 键的键码定义为 112

<input @keyup.f1="help" />

---

四、系统修饰键

系统修饰键用于监听组合键事件。

1. 常用系统修饰键

• .ctrl
• .alt
• .shift
• .meta（在 Mac 上是 Command 键，在 Windows 上是 Windows 键）

2. 示例

<!-- Ctrl + Click -->
<button @click.ctrl="doSomething">按住 Ctrl 点击我</button>

<!-- Alt + Enter -->
<input @keyup.alt.enter="submit" />

---

五、鼠标按钮修饰符

鼠标按钮修饰符用于监听特定的鼠标按钮事件。

1. 常用鼠标按钮修饰符

• .left：左键
• .right：右键
• .middle：中键

2. 示例

<button @click.right="rightClick">右键点击我</button>

---

总结

Vue 中的修饰符可以大大简化代码逻辑，常见的修饰符包括：

1. 表单修饰符：.lazy、.number、.trim。
2. 事件修饰符：.stop、.prevent、.capture、.self、.once、.passive、.native。
3. 按键修饰符：.enter、.tab、.delete 等。
4. 系统修饰键：.ctrl、.alt、.shift、.meta。
5. 鼠标按钮修饰符：.left、.right、.middle。

这些修饰符可以帮助开发者更高效地处理表单输入、事件和键盘操作。