修饰符 Modifiers

好的，我们来详细讲解 Vue 中的修饰符 (Modifiers)。

修饰符是以点（.）开头的特殊后缀，用于告知指令（如 v-on 或 v-model）应该以某种特殊的方式来绑定。它们极大地简化了代码，让我们不必在方法中编写大量的事件处理逻辑。

Vue 的修饰符主要分为三大类：

1. 事件修饰符 (Event Modifiers)：用于 v-on (简写为 @) 指令。
2. v-model 修饰符 (v-model Modifiers)：用于 v-model 指令。
3. 按键修饰符 (Key Modifiers)：用于 v-on 监听键盘事件。
4. 鼠标按键修饰符 (Mouse Button Modifiers)：用于 v-on 监听鼠标事件。

下面我们逐一详细讲解。

---

1. 事件修饰符 (Event Modifiers)

这些修饰符用在 @click、@submit 等事件监听器上。

.stop

• 作用：阻止事件继续冒泡 (bubbling)。等同于调用 event.stopPropagation()。
• 场景：当内外两层元素都监听了同一个事件（如 click），点击内层元素时，不希望触发外层元素的事件。

代码示例：

<div @click="doThat">
  <div @click.stop="doThis">点击我不会冒泡div>
div>

.prevent

• 作用：阻止元素的默认行为。等同于调用 event.preventDefault()。
• 场景：阻止表单提交后刷新页面；阻止 标签的跳转。

代码示例：

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

<a href="/some/path" @click.prevent>阻止默认跳转a>

.capture

• 作用：让事件在捕获阶段 (capture phase) 就被处理，而不是默认的冒泡阶段。
• 场景：当你希望父元素比子元素更早地处理一个事件时。事件处理顺序是：从外到内（捕获），再从内到外（冒泡）。

代码示例：

<div @click.capture="handleParentCapture"> <div @click="handleChildBubble">div> div>

.self

• 作用：只有当事件的触发源是元素自身时，才会触发回调。换句话说，如果事件是从子元素冒泡上来的，则不会触发。
• 场景：创建一个模态框 (modal) 的背景遮罩，希望只在点击遮罩本身时关闭模态框，而不是点击模态框内容区域时。

代码示例：

<div class="modal-backdrop" @click.self="closeModal">
  <div class="modal-content">
    <p>这是弹窗内容p>
  div>
div>

.once

• 作用：绑定的事件只会触发一次。
• 场景：一次性的欢迎动画、支付按钮防止重复点击等。

代码示例：

<button @click.once="doSomethingExpensive">一次性操作button>

.passive

• 作用：告诉浏览器，这个事件监听器不会调用 event.preventDefault()。这可以优化移动端滚屏的性能。
• 场景：主要用于优化 scroll, touchmove 等滚动事件的性能。它让浏览器无需等待监听函数执行完毕，就可以立即处理滚动。

代码示例：

<div @scroll.passive="onScroll">...大量内容...div>

修饰符可以串联使用，例如 @click.stop.prevent。

---

2. v-model 修饰符

这些修饰符用于自定义 v-model 的行为。

.lazy

• 作用：默认情况下，v-model 在每次 input 事件后同步数据。使用 .lazy 会转为在 change 事件后同步（即输入框失去焦点时）。
• 场景：当输入框内容变化频繁，但你只关心最终结果时，可以减少不必要的更新，提升性能。

代码示例：

<input v-model.lazy="message">

.number

• 作用：自动将用户的输入值转为数值类型。如果输入无法被 parseFloat() 解析，则返回原始值。
• 场景：处理年龄、数量等需要是数字的输入。

代码示例：

<input v-model.number="age" type="number">

.trim

• 作用：自动过滤用户输入内容首尾的空白字符。
• 场景：处理用户名、密码等不应包含前后空格的输入。

代码示例：

<input v-model.trim="username">

---

3. 按键修饰符 (Key Modifiers)

用于监听键盘事件，如 @keyup, @keydown。

• 作用：只有在按下特定按键时才触发事件。
• 常用按键别名：.enter, .tab, .delete (捕获“删除”和“退格”键), .esc, .space, .up, .down, .left, .right。

代码示例：

<input @keyup.enter="submit">

<div @keyup.esc="closeModal">div>

---

4. 鼠标按键修饰符 (Mouse Button Modifiers)

• 作用：限制事件只能由特定的鼠标按键触发。
• 按键别名：.left, .right, .middle。

代码示例：

<div @mousedown.right="onRightClick">右键点击我div>

<div @mousedown.middle="doSomething">div>