Vue常用內置指令有哪些

Vue常用內置指令有哪些

Vue.js 是一個流行的前端框架，它提供了許多內置指令來簡化開發過程。指令是帶有 v- 前綴的特殊屬性，用于在模板中應用一些特殊的行為。以下是一些常用的 Vue 內置指令：

1. v-bind

v-bind 指令用于動態綁定 HTML 屬性。它可以將 Vue 實例中的數據綁定到 HTML 元素的屬性上。

<div v-bind:class="{'active': isActive}"></div>

簡寫形式：

<div :class="{'active': isActive}"></div>

2. v-model

v-model 指令用于在表單元素上創建雙向數據綁定。它通常用于 <input>、<textarea> 和 <select> 元素。

<input v-model="message" placeholder="請輸入內容">

3. v-if、v-else-if、v-else

這些指令用于條件渲染。v-if 根據表達式的值來決定是否渲染元素，v-else-if 和 v-else 則用于鏈式條件判斷。

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else>C</div>

4. v-show

v-show 指令用于根據表達式的值來切換元素的顯示狀態。與 v-if 不同，v-show 只是簡單地切換 CSS 的 display 屬性。

<div v-show="isVisible">可見內容</div>

5. v-for

v-for 指令用于渲染列表。它可以遍歷數組或對象，并為每個元素生成一個模板。

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

6. v-on

v-on 指令用于監聽 DOM 事件，并在觸發時執行一些 JavaScript 代碼。

<button v-on:click="handleClick">點擊我</button>

簡寫形式：

<button @click="handleClick">點擊我</button>

7. v-text

v-text 指令用于更新元素的 textContent。它會覆蓋元素內部的所有內容。

<span v-text="message"></span>

8. v-html

v-html 指令用于更新元素的 innerHTML。它可以渲染 HTML 字符串，但要注意防止 XSS 攻擊。

<div v-html="htmlContent"></div>

9. v-pre

v-pre 指令用于跳過該元素及其子元素的編譯過程。這在需要顯示原始 Mustache 標簽時非常有用。

<span v-pre>{{ 這里的內容不會被編譯 }}</span>

10. v-cloak

v-cloak 指令用于在 Vue 實例編譯完成之前隱藏未編譯的 Mustache 標簽。通常與 CSS 結合使用。

<div v-cloak>{{ message }}</div>

[v-cloak] {
  display: none;
}

11. v-once

v-once 指令用于只渲染元素和組件一次。之后的更新將不再重新渲染。

<span v-once>{{ message }}</span>

12. v-slot

v-slot 指令用于定義插槽內容。它通常用于具名插槽或作用域插槽。

<template v-slot:header>
  <h1>標題</h1>
</template>

簡寫形式：

<template #header>
  <h1>標題</h1>
</template>

總結

Vue 提供了豐富的內置指令，幫助開發者更高效地構建動態和響應式的用戶界面。通過熟練掌握這些指令，可以大大提升開發效率和代碼質量。