一文搞懂 Vue 指令：定义+常用内置指令全解析

会员源码网
0 阅读8分钟

对于前端开发者而言，Vue 作为一款渐进式 JavaScript 框架，以其简洁的语法、高效的响应式机制，成为入门前端框架的优选。而 Vue 指令，正是 Vue 模板语法的核心组成部分，是我们操作 DOM、实现数据与视图联动的“快捷键”。

很多刚接触 Vue 的小伙伴，会对指令的概念感到困惑，不清楚它到底是什么、怎么用。今天这篇文章，就从基础定义入手，一步步拆解 Vue 指令的核心逻辑，再盘点最常用的内置指令，搭配简单实例，让你轻松上手，再也不用为指令发愁～

一、什么是 Vue 指令？

首先，我们先明确一个核心定义：Vue 指令是带有 v- 前缀的特殊属性，用于在模板中实现对 DOM 的操作、数据绑定、事件监听等功能。

简单来说，指令就是 Vue 给我们封装好的“工具”，我们不需要手动写原生 JS 去操作 DOM（比如修改元素样式、控制元素显示隐藏、绑定事件），只需要在 HTML 标签上添加对应的 v- 指令，就能快速实现想要的效果。

Vue 指令的核心作用，是将数据与视图进行关联，实现“数据驱动视图”——当数据发生变化时，视图会自动更新，无需我们手动操作 DOM，这也是 Vue 响应式的核心体现之一。

举个最基础的例子，我们常用的 v-text 指令，就能将数据渲染到页面上：

<!-- 模板中 -->
<div v-text="message"></div>

<!-- JS 中 -->
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue！'
  }
})

这里的 v-text 就是一个指令，它会将 data 中的 message 数据，渲染到 div 标签中，相当于原生 JS 中的 innerText，但用法更简洁、更贴合 Vue 的数据驱动思想。

另外，Vue 指令还支持传递参数（比如 v-bind:src）、添加修饰符（比如 v-on:click.prevent），让指令的功能更灵活，满足不同场景的需求。

二、Vue 常用内置指令（必学）

Vue 提供了很多内置指令，覆盖了日常开发中绝大多数场景，无需我们自定义，直接使用即可。下面按功能分类，盘点最常用的几个，每个都搭配实例，一看就会。

（一）数据绑定指令：将数据渲染到视图

这类指令的核心作用，是将 Vue 实例中的数据，同步到页面的 DOM 元素中，实现数据与视图的联动。

1. v-text：文本渲染

作用：将数据以纯文本的形式渲染到指定元素中，会覆盖元素原有的内容。

语法：v-text="数据名"

<!-- 实例 -->
<div id="app">
  <span v-text="username">默认文本</span> <!-- 最终显示：张三 -->
</div>

<script>
new Vue({
  el: '#app',
  data: {
    username: '张三'
  }
})
</script>

注意：v-text 会覆盖元素内的默认内容，如果想保留默认内容，可使用插值表达式 {{ }}，但 v-text 比插值表达式更高效，且能避免页面加载时出现“{{ }}”的闪烁问题。

2. v-html：HTML 渲染

作用：将数据中的 HTML 字符串，解析并渲染到指定元素中，相当于原生 JS 中的 innerHTML。

语法：v-html="HTML字符串"

<!-- 实例 -->
<div id="app">
  <div v-html="htmlContent"></div> <!-- 最终渲染为：<h3>这是HTML内容</h3> -->
</div>

<script>
new Vue({
  el: '#app',
  data: {
    htmlContent: '<h3>这是HTML内容</h3>'
  }
})
</script>

⚠️ 注意：使用 v-html 时，一定要确保数据来源是安全的，避免注入恶意 HTML 代码（比如 XSS 攻击），不要用于渲染用户输入的内容。

（二）条件渲染指令：控制元素的显示与隐藏

这类指令用于根据数据的真假，控制 DOM 元素是否显示、是否存在于页面中，是日常开发中最常用的指令之一。

1. v-if：条件渲染（销毁/创建 DOM）

作用：根据表达式的真假，决定是否渲染该元素。当表达式为 false 时，元素会被从 DOM 中销毁；为 true 时，会重新创建元素。

语法：v-if="表达式"

搭配使用：v-else-if（多条件判断）、v-else（兜底条件）

<!-- 实例：根据分数判断等级 -->
<div id="app">
  <div v-if="score >= 90">优秀</div>
  <div v-else-if="score >= 70">良好</div>
  <div v-else-if="score >= 60">及格</div>
  <div v-else>不及格</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    score: 85 // 最终显示：良好
  }
})
</script>

特点：v-if 是“惰性渲染”，初始条件为 false 时，元素不会被渲染，直到条件变为 true 才会创建；适合用于条件不常变化的场景（比如页面初始化时的条件判断）。

2. v-show：条件渲染（显示/隐藏 DOM）

作用：根据表达式的真假，控制元素的显示与隐藏（通过修改元素的 display 属性实现）。元素始终存在于 DOM 中，只是切换显示状态。

语法：v-show="表达式"

<!-- 实例：控制按钮显示隐藏 -->
<div id="app">
  <button v-show="isShow">点击我</button> <!-- isShow为true时显示，false时隐藏 -->
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isShow: true
  }
})
</script>

v-if vs v-show 核心区别：

  • v-if：销毁/创建 DOM，切换开销大，初始渲染开销小；
  • v-show：切换 display 属性，切换开销小，初始渲染开销大；
  • 使用场景：频繁切换显示隐藏用 v-show，条件很少变化用 v-if。

（三）列表渲染指令：循环渲染数据列表

v-for：列表循环

作用：根据数组或对象，循环渲染出对应的 DOM 元素，是渲染列表（比如商品列表、用户列表）的核心指令。

语法：

  • 循环数组：v-for="(item, index) in 数组名" :key="唯一标识"
  • 循环对象：v-for="(value, key, index) in 对象名" :key="唯一标识"

⚠️ 注意：使用 v-for 时，必须添加 :key 属性，且 key 的值必须是唯一的（比如数组的 id、索引等），目的是帮助 Vue 识别每个元素的身份，提高渲染效率，避免出现渲染错乱的问题。

<!-- 实例1：循环数组（商品列表） -->
<div id="app">
  <ul>
    <li v-for="(item, index) in goodsList" :key="item.id">
      第{{index+1}}个商品：{{item.name}}，价格：{{item.price}}元
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    goodsList: [
      { id: 1, name: '手机', price: 3999 },
      { id: 2, name: '电脑', price: 5999 },
      { id: 3, name: '平板', price: 2999 }
    ]
  }
})
&lt;/script&gt;

<!-- 实例2：循环对象（用户信息） -->
<div id="app">
  <div v-for="(value, key, index) in userInfo" :key="key">
    {{index+1}}. {{key}}：{{value}}
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    userInfo: {
      name: '李四',
      age: 25,
      gender: '男'
    }
  }
})
</script>

（四）事件绑定指令：绑定 DOM 事件

v-on：事件绑定

作用：给 DOM 元素绑定事件（比如点击、鼠标移动、键盘事件等），并执行对应的方法。

语法：v-on:事件名="方法名/事件表达式"，可简写为 @事件名="方法名/事件表达式"

常用修饰符（简化事件处理）：

  • .prevent：阻止默认事件（比如阻止表单提交、a 标签跳转）；
  • .stop：阻止事件冒泡；
  • .once：事件只执行一次；
  • .enter：监听键盘回车键。
<!-- 实例：绑定点击事件 -->
<div id="app">
  <!-- 简写形式 @click -->
  <button @click="sayHello">点击打招呼</button>
  <!-- 阻止默认事件（阻止表单提交） -->
  <form @submit.prevent="handleSubmit">
    <button type="submit">提交</button>
  </form>
  <!-- 事件只执行一次 -->
  <button @click.once="onlyOnce">只点击一次</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    sayHello() {
      alert('Hello Vue！');
    },
    handleSubmit() {
      console.log('表单提交了');
    },
    onlyOnce() {
      console.log('只执行一次');
    }
  }
})
</script>

（五）属性绑定指令：绑定 DOM 属性

v-bind：属性绑定

作用：将 Vue 实例中的数据，绑定到 DOM 元素的属性上（比如 src、href、class、style 等），实现属性的动态变化。

语法：v-bind:属性名="数据名"，可简写为 :属性名="数据名"

<!-- 实例1：绑定图片src属性 -->
<div id="app">
  <img :src="imgUrl" alt="图片" width="200">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    imgUrl: 'https://vuejs.org/images/logo.png' // 动态绑定图片地址
  }
})
</script>

<!-- 实例2：绑定class属性（动态切换样式） -->
<div id="app">
  <div :class="{ active: isActive }">动态切换样式</div>
  <button @click="isActive = !isActive">切换样式</button>
</div>

<style>
.active {
  color: red;
  font-size: 18px;
}
</style>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: false
  }
})
</script>

（六）其他常用指令

1. v-model：双向数据绑定

作用：实现表单元素（input、select、textarea 等）与数据的双向绑定——表单元素的值变化时，数据会自动更新；数据变化时，表单元素的值也会自动同步。

语法：v-model="数据名"

<!-- 实例：输入框双向绑定 -->
<div id="app">
  <input type="text" v-model="username" placeholder="请输入用户名">
  <p>你输入的用户名：{{username}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    username: ''
  }
})
</script>

注意：v-model 本质是语法糖，底层是结合 v-bind:value 和 v-on:input 实现的。

2. v-pre：跳过编译

作用：跳过该元素及其子元素的 Vue 编译，直接渲染原始内容。适合用于显示 {{ }} 符号，避免被 Vue 解析。

<div id="app">
  <div v-pre>{{ message }}</div> <!-- 最终显示：{{ message }}，不会被解析 -->
</div>

3. v-cloak：防止闪烁

作用：在 Vue 实例加载完成前，隐藏带有 v-cloak 的元素；当 Vue 实例加载完成后，自动移除 v-cloak，显示元素内容。用于解决页面加载时，插值表达式 {{ }} 闪烁的问题。

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

<div id="app" v-cloak>
  {{ message }}
</div>

<script>
// 模拟延迟加载Vue实例
setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue！'
    }
  })
}, 1000);
</script>

三、总结

以上就是 Vue 指令的核心定义，以及最常用的内置指令解析。其实 Vue 指令的本质，就是 Vue 帮我们封装好的 DOM 操作工具，核心目的是让我们摆脱原生 JS 繁琐的 DOM 操作，专注于数据和业务逻辑，提高开发效率。

对于刚入门 Vue 的小伙伴，建议先熟练掌握这些内置指令，尤其是 v-if/v-show、v-for、v-on、v-bind、v-model 这几个高频指令，它们是日常开发的基础，几乎每个 Vue 项目都会用到。

后续，Vue 还支持自定义指令，当内置指令无法满足需求时，我们可以根据自己的业务场景，封装属于自己的指令。不过，先把内置指令吃透，再学习自定义指令，会更轻松哦～

最后，希望这篇文章能帮助你快速理解 Vue 指令，如果你有其他疑问，或者想了解自定义指令的用法，欢迎在评论区留言交流～

avatar
文章
阅读
粉丝