Vue3指令详解，让你的开发更高效

前言

在使用 <template> 时，必不可少的就是用到形形色色的指令。在 Vue3 中，官方给我们提供了 14 个常规指令和 3 个特殊指令。其中，使用频次最高的就是 v-bind、v-if、v-for、v-model、v-on 等指令。

常用指令

v-bind

v-bind 指令用于绑定 HTML 属性。它的语法如下：

v-bind:属性名="表达式"

例如，要绑定一个名为 src 的属性，可以使用以下代码：

<img v-bind:src="imageUrl">

v-if

v-if 指令用于判断一个表达式是否为真，如果为真则显示元素，否则隐藏元素。它的语法如下：

v-if="表达式"

例如，要判断一个名为 isShow 的变量是否为真，可以使用以下代码：

<div v-if="isShow">显示元素</div>

v-for

v-for 指令用于遍历一个数组或对象。它的语法如下：

v-for="(item, index) in 数组或对象"

例如，要遍历一个名为 list 的数组，可以使用以下代码：

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

v-model

v-model 指令用于绑定表单元素的值。它的语法如下：

v-model="变量名"

例如，要绑定一个名为 input 的输入框，可以使用以下代码：

<input v-model="input">

v-on

v-on 指令用于监听事件。它的语法如下：

v-on:事件名="函数名"

例如，要监听一个名为 click 的事件，可以使用以下代码：

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

特殊指令

v-once

v-once 指令用于只渲染元素一次。它的语法如下：

v-once

例如，要只渲染一次一个名为 div 的元素，可以使用以下代码：

<div v-once>只渲染一次</div>

v-slot

v-slot 指令用于定义插槽。它的语法如下：

v-slot="插槽名"

例如，要定义一个名为 header 的插槽，可以使用以下代码：

<template v-slot:header>
  <h1>标题</h1>
</template>

v-pre

v-pre 指令用于防止编译器编译元素。它的语法如下：

v-pre

例如，要防止编译器编译一个名为 div 的元素，可以使用以下代码：

<div v-pre>{{ 未编译内容 }}</div>

结语

以上就是 Vue3 中常用指令的介绍。通过使用这些指令，我们可以轻松地构建出复杂的 UI 界面。

代码示例

// v-bind 示例
const app = Vue.createApp({
  data() {
    return {
      imageUrl: 'https://example.com/image.png',
    }
  },
})

// v-if 示例
const app = Vue.createApp({
  data() {
    return {
      isShow: true,
    }
  },
})

// v-for 示例
const app = Vue.createApp({
  data() {
    return {
      list: ['item1', 'item2', 'item3'],
    }
  },
})

// v-model 示例
const app = Vue.createApp({
  data() {
    return {
      input: '',
    }
  },
})

// v-on 示例
const app = Vue.createApp({
  data() {
    return {
      count: 0,
    },
    methods: {
      handleClick() {
        this.count++
      },
    }
  },
})