初识 Vue 指令 - 技术栈

Vue指令在Vue.js学习过程中扮演着至关重要的角色，它们是Vue框架的核心特性之一，对于构建动态、响应式的用户界面起到了关键作用。

本文面向小白，通过与原生JS对比的方式引入Vue指令的概念，接着介绍一些在开发中常用的 Vue 指令。

什么是Vue指令？

Vue指令是Vue.js框架中的一种特殊标记，用于在DOM元素上附加特定的行为。这些指令以 v- 开头，通过这些指令，我们可以在HTML模板中直接绑定数据，实现与Vue实例的数据关联以及对DOM的动态操作。常用的 Vue 指令有v-on、v-show、v-if、v-else、v-for、v-bind、v-model等等。

Vue 官方列出了所有的指令，大家可以结合文档，加快学习的步伐。Vue API 参考指令 | Vue.js (vuejs.org)

为什么要使用Vue指令？

Vue指令相比于原生JS提供了更高级的抽象和声明式的编码方式，通过数据驱动视图、双向数据绑定、组件化开发等特性简化了前端开发过程，减少了手动DOM操作的繁琐，提高了代码的可读性、可维护性和开发效率。

举个栗子🌰：

在原生JS中如何使用实现动态数据绑定？

html 复制代码

<!-- 原生JS数据绑定 --> 
<a id="myLink">点击我</a>
<script>
    var link = document.getElementById('myLink');
    var url = 'https://juejin.cn';
    link.href = url; 
</script>

无论如何，我们得先要拿到DOM结构，然后再对其进行绑定。

而Vue的优势在于我们不用再操作DOM结构了，Vue的模板化以及数据驱动的思想，让我们可以通过简单的指令就能实现想要的操作。

html 复制代码

<!-- Vue指令数据绑定 -->
<div id="app"></div>
<script>
  const app = Vue.createApp({
    template:'<a v-bind:href="url">点击我</a>'
    data: {
      url: 'https://juejin.cn'
    }
  }).mount('#app');
</script>

在这个例子中， Vue 的 v-bind 指令实现了动态数据绑定，与原生 JS 相比，Vue 的优势在于它无需频繁地手动获取DOM结构。通过 v-bind，我们能够直接将数据与元素属性关联起来，使得数据绑定更为简洁和直观。Vue的抽象层和指令系统简化了DOM操作，提高了效率，同时让代码更易读和维护。

可能一个例子不足以说明什么，那么我们再来一个：

在原生JS中，我们如何实现列表渲染？

html 复制代码

<!-- 原生JS数组遍历 -->
<ul id="app"></ul>

<script>
  var songList = document.getElementById('ul');
  var songs:['夜曲','七里香','说好不哭','给我一首歌的时间','晴天'];

  for (var i = 0; i < songs.length; i++) {
    var listItem = document.createElement('li');
    listItem.textContent = songs[i];
    songList.appendChild(listItem);
  }
</script>

上面的代码通过循环遍历歌曲数组，为每首歌曲创建一个 <li> 元素，然后将该元素添加到具有 id 为 app 的<ul>容器中。这样就实现了原生JS的数组遍历和列表渲染。

而在Vue中，我们可以使用v-for指令进行列表渲染：

html 复制代码

<!-- Vue指令数组遍历 -->
<ul id="app"></ul>
<script>
  const app = Vue.createApp({
    template:'<li v-for="song in songs">{{ song }}</li>'
    data: {
      songs:['夜曲','七里香','说好不哭','给我一首歌的时间','晴天'];
    }
  }).mount('#app');
</script>

在Vue中，我们只需使用在需要循环的标签中使用 v-for 指令，并声明需要遍历的数组，用插值表达式将属性进行渲染，Vue会自动帮我们创建对应的DOM元素。与原生JS不同，跳过了直接操作DOM。

上面两个例子展示了Vue指令相比于原生JS的优势，让我们可以轻松操作数据并更新DOM，而不用手动处理繁琐的DOM操作。Vue指令的简洁性和可读性为开发者提供了更友好的开发体验，下面我们来认识一些Vue开发中常用的指令。

常用的Vue指令

v-bind

用于动态地绑定HTML属性，将Vue实例的数据绑定到DOM元素的属性上。

基本语法是在需要绑定的 HTML 属性上使用该指令，并将需要绑定的属性名作为参数，后面跟上要绑定的数据。

1. 基本语法

v-bind 的基本语法是在需要绑定的 HTML 属性上使用该指令，并将需要绑定的属性名作为参数，后面跟上要绑定的数据。

html 复制代码

<a v-bind:href="url">链接</a>

href 是需要绑定的属性，url 是 Vue 实例中的数据。

2. 缩写语法

v-bind 有一个缩写语法，可以直接使用冒号 :表示。

html 复制代码

<a :href="url">链接</a>

3. 动态计算属性

v-bind 不仅可以绑定静态的字符串，还可以绑定动态计算的表达式。

html 复制代码

<button :disabled="isButtonDisabled">点击我</button>

disabled 属性会根据 isButtonDisabled 的值动态地进行绑定。如果 isButtonDisabled 为 true，按钮将被禁用。

4. 对象语法

v-bind 还可以使用对象语法，动态地绑定多个属性。

html 复制代码

<img :src="imageSrc" :alt="imageAlt">

这里 imageSrc 和 imageAlt 是 Vue 实例中的数据，分别绑定到 src 和 alt 属性上。

5. 动态 class 和 style

v-bind 也可以用于绑定 class 和 style。

html 复制代码

<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :style="{ color: textColor, fontSize: textSize + 'px' }"></div>

这里通过绑定的对象，根据 Vue 实例中的数据动态地计算出 class 和 style 的值。

6. 结合字符串拼接

如果需要在绑定中使用字符串拼接，可以在绑定的表达式中使用 JavaScript 的字符串拼接操作。

html 复制代码

<a :href="'/base/' + url">点击我</a>

7. 动态属性名

v-bind 还可以使用方括号 [] 来动态地指定属性名。

html 复制代码

<a :[attributeName]="value">点击我</a>

这里 attributeName 是 Vue 实例中的数据，它会动态地指定属性名。

v-on

v-on 是 Vue 中用于监听事件的指令，你可以在DOM元素上绑定事件监听器，以便在事件触发时执行相应的处理逻辑。 1. 基本用法

v-on 的基本语法是将其应用于一个DOM元素，后面跟着要监听的事件和对应的处理函数。

html 复制代码

<button v-on:click="handleClick">点击我</button>

当按钮被点击时，handleClick 方法会被调用。

2. 缩写语法

v-on 也有一种缩写语法，可以直接使用 @ 符号来表示。

html 复制代码

<button @click="handleClick">点击我</button>

3. 事件修饰符

在 v-on 中，可以使用事件修饰符来进一步控制事件监听的行为。

html 复制代码

<form @submit.prevent="handleSubmit">
  <!-- 阻止表单提交的默认行为 -->
  <button type="submit">提交</button>
</form>

常见的事件修饰符包括 .stop（停止事件冒泡）、.prevent（阻止默认行为）、.capture（添加事件侦听器时使用事件捕获阶段）、.self（只当事件是从侦听器绑定的元素本身触发时才触发）等。

4. 动态事件名

v-on 也支持动态地绑定事件名，可以通过在方法中返回事件名的方式。

html 复制代码

<button v-on:[eventName]="handleEvent">点击我</button>

<script>
export default {
  data() {
    return {
      eventName: 'click'
    };
  },
  methods: {
    handleEvent() {
      console.log('事件处理逻辑');
    }
  }
}
</script>

5. 多个事件监听器

可以通过在 v-on 中传入一个包含多个事件处理函数的对象，为同一个事件绑定多个监听器。

html 复制代码

<button v-on="{ click: handleClick, mouseover: handleMouseOver }">点击或悬停我</button>

6. 按键修饰符

在监听键盘事件时，可以使用按键修饰符来指定特定的按键。

html 复制代码

<input @keyup.enter="handleEnterKey">

在这个例子中，handleEnterKey 方法会在用户按下回车键时触发。

7. 自定义事件

除了原生的DOM事件，Vue组件也可以触发和监听自定义事件。

html 复制代码

<!-- 子组件 -->
<button @click="emitCustomEvent">触发自定义事件</button>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', '自定义数据');
    }
  }
}
</script>

<!-- 父组件 -->
<child-component @custom-event="handleCustomEvent"></child-component>

<script>
export default {
  methods: {
    handleCustomEvent(data) {
      console.log('接收到自定义事件，数据为:', data);
    }
  }
}
</script>

v-model

v-model 是Vue中用于实现表单元素和数据的双向绑定的指令。通过 v-model，可以在表单元素和Vue实例的数据之间建立双向通信，使表单的变化能够自动影响数据变化，反之亦然。

1. 基本用法

在最简单的情况下，v-model 通常用于文本输入框（<input>、<textarea>）和选择框（<select>）。在表单元素上使用 v-model，就相当于同时进行了数据的绑定和事件的监听。

html 复制代码

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

在这个例子中，message 是Vue实例中的一个数据属性。v-model 将输入框和 message 数据进行双向绑定，输入框的变化会即时反映到 message，反之亦然。

2. 修饰符

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">
```

3. 自定义组件中的v-model

在父组件中，使用 v-model 将子组件的属性与父组件的数据进行绑定。v-model 通常用于处理子组件中某个属性的输入和输出；在子组件中，通过 props 接收父组件传递的值，并通过 $emit 方法触发 input 事件以更新父组件的数据。

v-if、v-else-if、v-else

v-if、v-else-if、和 v-else 是用于条件渲染的指令。它们允许我们根据表达式的真假条件来决定是否渲染特定的DOM元素。

1. 基本用法

最基本的 v-if 用法是将其放置在一个元素上，并将其值绑定到一个布尔类型的表达式。

html 复制代码

<p v-if="isTrue">这个段落会根据 isTrue 的值进行渲染。</p>

如果 isTrue 是真，那么这个段落就会被渲染到页面上。

v-else-if

根据变量 type 的不同取值，会渲染不同的段落。

html 复制代码

<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else>C</div>

v-show

v-show 是 Vue 中用于条件显示元素的指令。与 v-if 不同，v-show 不是通过在DOM中添加或删除元素来控制显示与隐藏，而是通过CSS样式的 display 属性来控制元素的可见性。

1. 基本用法

v-show 的基本语法是将其应用于一个元素，其值绑定到一个布尔类型的表达式。

html 复制代码

<p v-show="isShow">这个段落会根据 isShow 的值显示或隐藏。</p>

如果 isShow 为真，那么该段落会显示；如果为假，该段落会隐藏。

2. 与 v-if 的区别

v-show 与 v-if 类似，都用于条件渲染，但它们有一些关键的区别：

v-show： 不管条件是真还是假，元素始终存在于DOM中，只是通过CSS的 display: none; 来控制可见性。
v-if： 根据条件的真假，决定是否将元素添加到DOM中或从DOM中删除。

3. 适用场景

当需要频繁切换可见性时，使用 v-show 可能比 v-if 性能更好，因为元素一直在DOM中，只是通过样式的变化来实现显示与隐藏。
当条件不经常改变，或者不想让元素存在于DOM中时，可以考虑使用 v-if。

v-for

1. 遍历数组

使用 v-for 遍历数组时，可以将数组的每个元素绑定到一个临时变量，然后在模板中使用该变量。

html 复制代码

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

item 是一个临时变量，它会依次取到数组 items 中的每个元素，从而生成对应数量的列表项。

2. 获取索引

如果需要获取数组元素的索引，可以使用第二个参数index ：

html 复制代码

<ul>
  <li v-for="(item, index) in items">{{ index + 1 }}. {{ item }}</li>
</ul>

3. 在 v-for 中使用绑定唯一 key 值

在使用 v-for 时，一般都需要为每个项提供唯一的 key 值，这样能够帮助 Vue 优化渲染，提高性能。

html 复制代码

<ul>
  <li v-for="(item, index) in items" :key="index">{{ index }}: {{ item }}</li>
</ul>

v-pre

v-pre 是 Vue 中的一个特殊指令，用于跳过该元素和所有子元素的编译过程。它主要用于优化性能，避免不必要的编译开销。

1. 基本用法

v-pre 指令可以直接应用在HTML元素上，它告诉Vue跳过这个元素及其子元素的编译。

html 复制代码

<template>
  <div v-pre>
    <span>{{ message }}</span>
  </div>
</template>

<div> 元素及其子元素都会被标记为 v-pre，告诉Vue跳过编译。

2. 使用场景

静态内容： 当你确定某个元素及其子元素的内容不会改变时，可以使用 v-pre 来跳过不必要的编译工作，提高渲染性能。
标记模板： 如果你的模板是在服务端渲染（SSR）过程中被标记的，而且你希望客户端保持这个标记，可以使用 v-pre。

v-cloak

v-cloak 是 Vue 中的一个特殊指令，用于解决在页面加载时闪烁的问题。它通常与 CSS 配合使用，确保 Vue 实例的编译完成后再显示相关内容。

1. 闪烁问题

当使用 Vue 进行页面渲染时，由于 Vue 需要一定的时间来解析和编译模板，如果页面在 Vue 实例渲染之前显示，用户可能会看到未编译的模板，导致页面出现短暂的闪烁。

2. 使用 v-cloak 解决闪烁问题

v-cloak 可以用于防止页面加载时未编译的模板显示在页面上。它是一个特殊的 CSS 类，通过在元素上应用该类，再结合样式设置，可以确保该元素及其子元素在 Vue 实例编译完成前不可见。

html 复制代码

<style>
  [v-cloak] {
    display: none;
  }
</style>

<div v-cloak>
  {{ message }}
</div>

这里使用 CSS 的 display: none; 样式，确保元素在未编译完成前不可见。[v-cloak] 是一个 CSS 选择器，用于选择带有 v-cloak 属性的元素。

v-html

v-html 是 Vue 中的一个特殊指令，用于将数据作为 HTML 解析并插入到元素中。它允许在 Vue 模板中动态地渲染包含 HTML 结构的文本内容。

1. 基本用法

v-html 的基本语法是将其应用于一个元素，其值绑定到包含 HTML 代码的数据。

html 复制代码

<div v-html="htmlContent"></div>

这里htmlContent 是一个包含 HTML 代码的字符串，它会被解析并插入到 <div> 元素中。

v-text

在 Vue 中，v-text 是用于更新元素的文本内容的指令。它类似于插值表达式 {{ }}，但是是一个更直接的方式来将数据绑定到元素的文本内容。

1. 基本用法

v-text 的基本语法是将其应用于一个元素，其值绑定到要显示的文本数据。

html 复制代码

<p v-text="message"></p>

这里的message 是一个在 Vue 实例中定义的数据，它将直接更新 <p> 元素的文本内容。

2. 与插值表达式的区别

v-text 与插值表达式 {{ }} 类似，都是用于将数据渲染到页面上，但有一些区别：

v-text： 直接将数据绑定到元素的文本内容，不会出现插值表达式的大括号。
插值表达式： 将数据嵌套在大括号中，形成 {{ data }} 的形式，Vue 会将其解释为一个表达式，并将表达式的结果渲染到元素上。

v-once

v-once 是 Vue 中的一个特殊指令，用于标记一个元素或组件只渲染一次。一旦元素或组件渲染完成，v-once 就会阻止进一步的渲染，即使后续数据发生变化也不会重新渲染。

1. 基本用法

v-once 的基本语法是将其应用于一个元素或组件，这样 Vue 将只渲染一次，之后就会将其缓存起来，即使数据发生变化也不会再次渲染。

html 复制代码

<span v-once>{{ message }}</span>

<span> 元素将只渲染一次，即使 message 的值发生变化。

2. 适用场景

静态内容： 当元素或组件的内容是静态不变的，不随数据变化而改变时，可以使用 v-once，以提高性能。
初始化渲染： 在一些只需要初始化渲染一次的场景，如展示初始配置信息等，使用 v-once 会减少不必要的更新。

自定义指令

在 Vue 中，可以通过 directive 函数来创建自定义指令。自定义指令提供了对 DOM 元素进行底层操作的能力，可以用于封装可复用的行为。

html 复制代码

<!-- 在模板中使用自定义指令 -->
<div v-change-background-color></div>

<script>
// 注册全局自定义指令
Vue.directive('change-background-color', {
  // bind 钩子函数，只调用一次，指令第一次绑定到元素时调用
  bind(el, binding) {
    // 设置鼠标悬停时的背景颜色
    el.style.backgroundColor = binding.value;
    // 添加鼠标悬停事件监听器
    el.addEventListener('mouseover', () => {
      el.style.backgroundColor = binding.arg || 'lightgray';
    });
    // 添加鼠标离开事件监听器
    el.addEventListener('mouseout', () => {
      el.style.backgroundColor = binding.value;
    });
  }
});
</script>

这里我们创建了一个全局的自定义指令 v-change-background-color，设置了鼠标悬停时的背景颜色，并添加了鼠标悬停和离开的事件监听器。

Vue指令的生命周期钩子函数

Vue 指令的生命周期钩子函数提供了在指令不同阶段执行自定义逻辑的机会。这些钩子函数允许开发者在指令的生命周期中执行特定的操作，以满足不同的需求。以下是一些常见的用途：

bind 钩子： 在指令绑定到元素时调用，可以进行一次性的初始化设置。常见的用途包括初始化状态、绑定事件监听器、设置初始样式等。
inserted 钩子： 在被绑定元素插入到父节点时调用。通常用于执行一些需要在元素插入到 DOM 后立即执行的操作，例如执行动画或触发初始数据加载。
update 钩子： 在组件 VNode 更新时调用，但可能发生在其子 VNode 更新之前。通常用于响应指令绑定的数据变化，更新元素的状态或执行其他与数据相关的操作。
componentUpdated 钩子： 在指令所在组件的 VNode 及其子组件的 VNode 全部更新后调用。用于处理一些需要在组件及其子组件更新后执行的逻辑，例如确保更新后的 DOM 渲染完毕。
unbind 钩子： 在指令与元素解绑时调用，可以进行清理操作，如移除事件监听器、清除定时器等。确保在指令不再需要时释放相关资源，防止内存泄漏。

最后

看到这里，我相信你已经对Vue指令有了初步的了解，相信你在实际项目中，多加实践，结合文档深入理解每个指令的用法，能够彻底搞懂并熟练运用，加油！

已将学习代码上传至 Github，欢迎大家学习指正！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 "点赞收藏+关注" ，感谢支持！！