Vue3中的常用指令详解

更新时间：2025年11月14日 16:48:55 作者：威风的虫

Vue3 的这些指令覆盖了渲染、条件、循环、事件、属性、双向绑定、插槽等核心场景,是前端工程师高效开发的 “利器”,掌握它们的用法与场景,能让你在 Vue 开发中事半功倍,写出更简洁、更易维护的代码,本文给大家介绍Vue3中的常用指令,感兴趣的朋友一起看看吧

一、文本与 HTML 渲染：v-text与v-html

1. v-text：纯文本渲染

v-text的作用是将数据纯文本式地插入到元素中，相当于 JavaScript 中的element.textContent。它会覆盖元素原本的内容，且自动进行 HTML 转义，避免 XSS 攻击。

<template>
  <div v-text="message"></div>
</template>
<script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue3 指令！');
</script>

渲染后，<div>中会直接显示Hello, Vue3 指令！。

2. v-html：HTML 内容渲染

若需要渲染包含 HTML 标签的内容，v-html就派上用场了，它相当于element.innerHTML。注意：使用时需确保内容来源可信，否则易引发 XSS 风险。

<template>
  <div v-html="richContent"></div>
</template>
<script setup>
import { ref } from 'vue';
const richContent = ref('<strong>这是带HTML标签的内容</strong>');
</script>

渲染后，<div>中会显示加粗的 “这是带 HTML 标签的内容”。

二、条件渲染：v-if、v-else、v-else-if

这组指令用于根据条件动态创建或销毁 DOM 元素，适合条件复杂或切换不频繁的场景（因为 DOM 会真实增删）。

基本用法

<template>
  <div v-if="type === 'A'">类型A</div>
  <div v-else-if="type === 'B'">类型B</div>
  <div v-else>其他类型</div>
</template>
<script setup>
import { ref } from 'vue';
const type = ref('A');
</script>

当type变化时，对应的<div>会被创建或销毁。

与v-show的区别

很多同学会混淆v-if和v-show，这里做个对比：

指令	渲染机制	性能特点	适用场景
v-if	动态增删 DOM 元素	切换时开销较大	条件不常切换、逻辑复杂的场景
v-show	控制display属性显隐	初始渲染开销略大	频繁切换的场景

v-show示例：

<template>
  <div v-show="isVisible">我可以被频繁切换显隐</div>
</template>
<script setup>
import { ref } from 'vue';
const isVisible = ref(true);
</script>

三、列表渲染：v-for

v-for用于循环渲染列表数据，支持数组、对象、字符串甚至数字的遍历。

数组遍历

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{ index + 1 }}. {{ item.name }}
    </li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const list = ref([
  { name: 'Vue指令' },
  { name: '组件化' },
  { name: '响应式' }
]);
</script>

key是为了让 Vue 更高效地复用 DOM，建议使用唯一标识（如 ID）而非索引。

对象与其他类型遍历

（1）对象遍历：v-for="(value, key, index) in obj"

（2）字符串遍历：v-for="(char, index) in 'Vue'"

（3）数字遍历：v-for="num in 3"（渲染 3 次）

四、事件与属性绑定：v-on与v-bind

1. v-on：事件监听

用于给元素绑定事件，可简写为@。支持传参、事件修饰符（如.stop、.prevent）等。

<template>
  <button @click="handleClick('参数')">点击我</button>
  <form @submit.prevent="handleSubmit">
    <button type="submit">提交</button>
  </form>
</template>
<script setup>
const handleClick = (param) => {
  console.log('点击事件触发，参数：', param);
};
const handleSubmit = () => {
  console.log('表单提交（已阻止默认行为）');
};
</script>

2. v-bind：属性绑定

用于绑定 HTML 属性、组件 props 等，可简写为:。

<template>
  <img :src="imgUrl" :alt="imgAlt" :class="{ active: isActive }">
  <MyComponent :propsData="componentData" />
</template>
<script setup>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';
const imgUrl = ref('https://example.com/vue.png');
const imgAlt = ref('Vue Logo');
const isActive = ref(true);
const componentData = ref({ name: 'Vue指令详解' });
</script>

五、双向数据绑定：v-model

v-model是语法糖，本质是结合v-bind（绑定值）和v-on（监听输入事件），实现表单元素与数据的双向同步。

<template>
  <input v-model="inputValue" type="text" placeholder="请输入内容">
  <p>你输入的内容：{{ inputValue }}</p>
  <!-- 自定义组件的v-model -->
  <MyInput v-model="customValue" />
</template>
<script setup>
import { ref } from 'vue';
import MyInput from './MyInput.vue';
const inputValue = ref('');
const customValue = ref('自定义组件双向绑定');
</script>

在自定义组件中，v-model默认绑定modelValue prop 和update:modelValue事件，也可通过model选项自定义。

六、插槽分发：v-slot

v-slot（可简写为#）用于组件插槽的内容分发，让组件更具扩展性。

具名插槽

<!-- 父组件 -->
<template>
  <Layout>
    <template #header>
      <h1>页面头部</h1>
    </template>
    <template #footer>
      <p>页面底部</p>
    </template>
    <template #default>
      <p>页面主体内容</p>
    </template>
  </Layout>
</template>
<!-- Layout组件 -->
<template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 默认插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

作用域插槽

若插槽内容需要访问子组件的数据，可使用作用域插槽：

<!-- 父组件 -->
<template>
  <UserList>
    <template #item="{ user }">
      <p>{{ user.name }} - {{ user.age }}岁</p>
    </template>
  </UserList>
</template>
<!-- UserList组件 -->
<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <slot name="item" :user="user"></slot>
    </li>
  </ul>
</template>
<script setup>
import { ref } from 'vue';
const users = ref([
  { id: 1, name: '张三', age: 20 },
  { id: 2, name: '李四', age: 22 }
]);
</script>

总结

Vue3 的这些指令覆盖了渲染、条件、循环、事件、属性、双向绑定、插槽等核心场景，是前端工程师高效开发的 “利器”。掌握它们的用法与场景，能让你在 Vue 开发中事半功倍，写出更简洁、更易维护的代码。

到此这篇关于Vue3中的常用指令的文章就介绍到这了,更多相关vue常用指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue
指令

Vue设计器form-create-designer配置表单默认值示例详解
这篇文章主要介绍了如何使用开源项目form-create-designer来灵活调整表单的默认值,通过config.formOptions,您可以自定义表单的全局布局,文章提供了一个详细的例子,展示了如何使用form-create-designer的配置选项来调整表单的布局和外观,感兴趣的朋友一起看看吧
2024-11-11
源码分析Vue3响应式核心之effect
这篇文章主要为大家详细介绍了Vue3响应式核心之effect的相关知识，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下
2023-04-04
详解vue后台系统登录态管理
这篇文章主要介绍了vue后台系统登录管理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue动态获取width的方法
今天小编就为大家分享一篇Vue动态获取width的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
uni-appx和uni-app的区别以及该如何选择详解
Uniapp X是DCloud推出的下一代跨平台应用开发引擎,基于 TypeScript 和原生渲染技术,性能显著提升,接近原生应用,这篇文章主要介绍了uni-appx和uni-app的区别以及该如何选择的相关资料,需要的朋友可以参考下
2025-09-09
vue组件父子间通信详解（三）
这篇文章主要为大家详细介绍了vue组件父子间通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
vue-cli3.0+element-ui上传组件el-upload的使用
这篇文章主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
Vue组件间传递数据的多种方法
在实际开发中,Vue组件之间的数据传递是最常见的需求,由于组件的作用域相互独立,如何在父子、兄弟和跨级组件间传递数据就显得尤为重要,本文将详细介绍多种Vue组件间传递数据的方,需要的朋友可以参考下
2025-03-03
Vue3全局组件通信之provide / inject详解
这篇文章主要介绍了Vue3全局组件通信之provide / inject,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
vue踩坑记-在项目中安装依赖模块npm install报错
这篇文章主要介绍了vue踩坑记-在项目中安装依赖模块npm install报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04