vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue常用指令

Vue3中的常用指令详解

作者：威风的虫

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

在 Vue3 的世界里，指令是连接模板与逻辑的桥梁，它们以v-开头，为我们提供了简洁且强大的 DOM 操作与业务逻辑处理能力。今天，我们就来逐一剖析这些常用指令，带你从入门到精通，让前端开发效率 “飞” 起来。

一、文本与 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常用指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文