9.6 修饰符的使用-Vue.js从入门到精通(二)

当前位置:　首页>> 技术小册>> Vue.js从入门到精通(二)

### 9.6 修饰符的使用

在Vue.js中，修饰符（Modifiers）是一种特殊的后缀，用于指示指令应该以何种方式被绑定。它们为开发者提供了一种灵活且强大的方式来调整指令的行为，而无需编写额外的逻辑或组件。在Vue.js的许多内置指令中，如`v-model`、`v-on`（或简写为`@`）、`v.bind`（或简写为`:`）等，都可以使用修饰符来细化其功能。本章将深入探讨Vue.js中修饰符的使用，重点介绍几种常见且实用的修饰符，以及它们在实际开发中的应用场景。

#### 9.6.1 事件修饰符

事件修饰符是Vue.js中最常用的一类修饰符，主要用于`v-on`指令，以`.`开头的特殊后缀形式出现。它们用于处理DOM事件的细节，如阻止默认行为、阻止事件冒泡等。

- **.stop**：阻止事件冒泡。在默认情况下，事件会从触发它的最内层元素开始，一直向上传播到DOM树的顶层。使用`.stop`修饰符可以阻止这种传播。
  
  ```html
  
  <div @click="divClicked">
    <button @click.stop="buttonClicked">点击我</button>
  </div>
  ```

- **.prevent**：阻止默认行为。例如，在表单提交时阻止页面跳转，或者在点击链接时阻止页面跳转。
  
  ```html
  
  <form @submit.prevent="onSubmit">
    <button type="submit">提交</button>
  </form>
  ```

- **.capture**：使用事件捕获模式。默认情况下，事件采用冒泡模式，即从最内层元素向外层元素传播。`.capture`修饰符可以改变这一行为，使事件采用捕获模式，即事件先从外层元素开始，然后向内层元素传播。
  
  ```html
  <div @click.capture="divClicked">
    <button @click="buttonClicked">点击我</button>
  </div>
  ```

- **.self**：只有当事件在该元素本身（而不是子元素）触发时，才触发处理函数。
  
  ```html
  
  <div @click.self="divClicked">
    <button @click="buttonClicked">点击我</button>
  </div>
  ```

- **.once**：事件只触发一次。这在处理一些只需执行一次的逻辑时非常有用。
  
  ```html
  
  <button @click.once="clickedOnce">点击我</button>
  ```

- **.passive**：指示浏览器该事件永远不会调用`preventDefault()`。这主要用于改善滚动性能。
  
  ```html
  
  <div @scroll.passive="onScroll">...</div>
  ```

#### 9.6.2 按键修饰符

在监听键盘事件时，Vue.js允许你通过按键修饰符来指定只有特定按键被按下时才触发事件。这些修饰符以`.`开头，后跟具体的按键名（如`.enter`、`.esc`等），也可以组合使用（如`.ctrl.enter`）。

```html

<input @keyup.enter="submit">

<input @keyup.ctrl.enter="submit">
```

Vue.js支持几乎所有的键盘按键作为修饰符，包括但不限于`enter`、`tab`、`delete`（或`del`）、`esc`、`space`、`up`、`down`、`left`、`right`等。此外，Vue.js还允许你使用按键的键码（keyCode）作为修饰符，但这种方式在新版本的Vue中已不推荐使用，因为键码值在不同浏览器和键盘布局中可能不一致。

#### 9.6.3 `v-model` 修饰符

`v-model`在Vue.js中用于在表单输入和应用状态之间创建双向数据绑定。`v-model`修饰符允许你控制这个双向绑定的具体行为。

- **.lazy**：默认情况下，`v-model`在`input`事件触发时同步输入框的值与数据。`.lazy`修饰符将同步改为在`change`事件触发时进行，这对于处理大量文本输入时提升性能很有用。
  
  ```html
  <input v-model.lazy="message">
  ```

- **.number**：自动将用户的输入值转换为数值类型。如果转换失败，则返回原始输入值。
  
  ```html
  <input v-model.number="age" type="number">
  ```

- **.trim**：自动过滤用户输入的首尾空白字符。
  
  ```html
  <input v-model.trim="username">
  ```

#### 9.6.4 自定义指令中的修饰符

除了Vue.js内置的指令和修饰符外，你还可以定义自己的指令，并在其中使用修饰符。在定义自定义指令时，可以通过`binding.modifiers`来访问传递给指令的修饰符。

```javascript
Vue.directive('focus', {
  // 当被绑定的元素插入到DOM中时……
  inserted: function (el, binding) {
    // 如果没有提供修饰符，或者修饰符不是'prevent'，则自动聚焦
    if (!binding.modifiers.prevent) {
      el.focus();
    }
  }
});

// 使用自定义指令时添加修饰符
<input v-focus.prevent>
```

在上面的例子中，我们定义了一个名为`focus`的自定义指令，它尝试将元素聚焦。但是，如果我们在使用这个指令时添加了`.prevent`修饰符，那么聚焦行为将被阻止。

#### 9.6.5 小结

Vue.js的修饰符提供了一种简洁而强大的方式来调整指令的行为，无需编写额外的逻辑或组件。通过合理使用事件修饰符、按键修饰符、`v-model`修饰符以及自定义指令中的修饰符，你可以更加灵活和高效地构建Vue.js应用。掌握这些修饰符的使用，将大大提升你的开发效率和代码质量。

在编写Vue.js应用时，建议深入了解并熟练掌握每种修饰符的特性和用法，以便在合适的场景中选择最合适的修饰符，实现最佳的开发效果。同时，也要关注Vue.js官方文档的更新，因为随着版本的迭代，Vue.js可能会引入新的修饰符或调整现有修饰符的行为。

该分类下的相关小册推荐：

Vue面试指南

Vue3技术解密

TypeScript和Vue从入门到精通(三)

移动端开发指南

Vue.js从入门到精通(三)

Vue原理与源码解析

TypeScript和Vue从入门到精通(五)

Vue源码完全解析

TypeScript和Vue从入门到精通(一)

TypeScript和Vue从入门到精通(四)

VUE组件基础与实战

TypeScript和Vue从入门到精通(二)