快捷導(dǎo)航

Vue3中的常用指令詳解

更新時(shí)間：2025年11月14日 16:48:55 作者：威風(fēng)的蟲(chóng)

Vue3 的這些指令覆蓋了渲染、條件、循環(huán)、事件、屬性、雙向綁定、插槽等核心場(chǎng)景,是前端工程師高效開(kāi)發(fā)的 “利器”,掌握它們的用法與場(chǎng)景,能讓你在 Vue 開(kāi)發(fā)中事半功倍,寫(xiě)出更簡(jiǎn)潔、更易維護(hù)的代碼,本文給大家介紹Vue3中的常用指令,感興趣的朋友一起看看吧

在 Vue3 的世界里，指令是連接模板與邏輯的橋梁，它們以v-開(kāi)頭，為我們提供了簡(jiǎn)潔且強(qiáng)大的 DOM 操作與業(yè)務(wù)邏輯處理能力。今天，我們就來(lái)逐一剖析這些常用指令，帶你從入門(mén)到精通，讓前端開(kāi)發(fā)效率 “飛” 起來(lái)。

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

1. v-text：純文本渲染

v-text的作用是將數(shù)據(jù)純文本式地插入到元素中，相當(dāng)于 JavaScript 中的element.textContent。它會(huì)覆蓋元素原本的內(nèi)容，且自動(dòng)進(jìn)行 HTML 轉(zhuǎn)義，避免 XSS 攻擊。

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

渲染后，<div>中會(huì)直接顯示Hello, Vue3 指令！。

2. v-html：HTML 內(nèi)容渲染

若需要渲染包含 HTML 標(biāo)簽的內(nèi)容，v-html就派上用場(chǎng)了，它相當(dāng)于element.innerHTML。注意：使用時(shí)需確保內(nèi)容來(lái)源可信，否則易引發(fā) XSS 風(fēng)險(xiǎn)。

<template>
  <div v-html="richContent"></div>
</template>
<script setup>
import { ref } from 'vue';
const richContent = ref('<strong>這是帶HTML標(biāo)簽的內(nèi)容</strong>');
</script>

渲染后，<div>中會(huì)顯示加粗的 “這是帶 HTML 標(biāo)簽的內(nèi)容”。

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

這組指令用于根據(jù)條件動(dòng)態(tài)創(chuàng)建或銷(xiāo)毀 DOM 元素，適合條件復(fù)雜或切換不頻繁的場(chǎng)景（因?yàn)?DOM 會(huì)真實(shí)增刪）。

基本用法

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

當(dāng)type變化時(shí)，對(duì)應(yīng)的<div>會(huì)被創(chuàng)建或銷(xiāo)毀。

與v-show的區(qū)別

很多同學(xué)會(huì)混淆v-if和v-show，這里做個(gè)對(duì)比：

指令	渲染機(jī)制	性能特點(diǎn)	適用場(chǎng)景
v-if	動(dòng)態(tài)增刪 DOM 元素	切換時(shí)開(kāi)銷(xiāo)較大	條件不常切換、邏輯復(fù)雜的場(chǎng)景
v-show	控制display屬性顯隱	初始渲染開(kāi)銷(xiāo)略大	頻繁切換的場(chǎng)景

v-show示例：

<template>
  <div v-show="isVisible">我可以被頻繁切換顯隱</div>
</template>
<script setup>
import { ref } from 'vue';
const isVisible = ref(true);
</script>

三、列表渲染：v-for

v-for用于循環(huán)渲染列表數(shù)據(jù)，支持?jǐn)?shù)組、對(duì)象、字符串甚至數(shù)字的遍歷。

數(shù)組遍歷

<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: '響應(yīng)式' }
]);
</script>

key是為了讓 Vue 更高效地復(fù)用 DOM，建議使用唯一標(biāo)識(shí)（如 ID）而非索引。

對(duì)象與其他類(lèi)型遍歷

（1）對(duì)象遍歷：v-for="(value, key, index) in obj"

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

（3）數(shù)字遍歷：v-for="num in 3"（渲染 3 次）

四、事件與屬性綁定：v-on與v-bind

1. v-on：事件監(jiān)聽(tīng)

用于給元素綁定事件，可簡(jiǎn)寫(xiě)為@。支持傳參、事件修飾符（如.stop、.prevent）等。

<template>
  <button @click="handleClick('參數(shù)')">點(diǎn)擊我</button>
  <form @submit.prevent="handleSubmit">
    <button type="submit">提交</button>
  </form>
</template>
<script setup>
const handleClick = (param) => {
  console.log('點(diǎn)擊事件觸發(fā)，參數(shù)：', param);
};
const handleSubmit = () => {
  console.log('表單提交（已阻止默認(rèn)行為）');
};
</script>

2. v-bind：屬性綁定

用于綁定 HTML 屬性、組件 props 等，可簡(jiǎn)寫(xiě)為:。

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

五、雙向數(shù)據(jù)綁定：v-model

v-model是語(yǔ)法糖，本質(zhì)是結(jié)合v-bind（綁定值）和v-on（監(jiān)聽(tīng)輸入事件），實(shí)現(xiàn)表單元素與數(shù)據(jù)的雙向同步。

<template>
  <input v-model="inputValue" type="text" placeholder="請(qǐng)輸入內(nèi)容">
  <p>你輸入的內(nèi)容：{{ 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默認(rèn)綁定modelValue prop 和update:modelValue事件，也可通過(guò)model選項(xiàng)自定義。

六、插槽分發(fā)：v-slot

v-slot（可簡(jiǎn)寫(xiě)為#）用于組件插槽的內(nèi)容分發(fā)，讓組件更具擴(kuò)展性。

具名插槽

<!-- 父組件 -->
<template>
  <Layout>
    <template #header>
      <h1>頁(yè)面頭部</h1>
    </template>
    <template #footer>
      <p>頁(yè)面底部</p>
    </template>
    <template #default>
      <p>頁(yè)面主體內(nèi)容</p>
    </template>
  </Layout>
</template>
<!-- Layout組件 -->
<template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- 默認(rèn)插槽 -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

作用域插槽

若插槽內(nèi)容需要訪問(wèn)子組件的數(shù)據(jù)，可使用作用域插槽：

<!-- 父組件 -->
<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>

總結(jié)

Vue3 的這些指令覆蓋了渲染、條件、循環(huán)、事件、屬性、雙向綁定、插槽等核心場(chǎng)景，是前端工程師高效開(kāi)發(fā)的 “利器”。掌握它們的用法與場(chǎng)景，能讓你在 Vue 開(kāi)發(fā)中事半功倍，寫(xiě)出更簡(jiǎn)潔、更易維護(hù)的代碼。

到此這篇關(guān)于Vue3中的常用指令的文章就介紹到這了,更多相關(guān)vue常用指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: