vue的內置指令

Vue 指令的本質是：

• 聲明式的 DOM 操作接口（隱藏底層 JavaScript 代碼）。
• 響應式數據的綁定媒介（連接數據和視圖）。
• 模板編譯的標記（最終轉換為渲染函數邏輯）。
• 可擴展的語法糖（簡化復雜操作，如 v-model）。

通過指令，Vue 實現了 數據驅動視圖 的核心思想，讓開發者更專注于業務邏輯而非手動操作 DOM。

指令名稱	簡寫形式	描述	示例
v-bind	:	動態綁定屬性或組件 prop	:src="url" 或 v-bind:class="cls"
v-on	@	綁定事件監聽器	@click="handleClick" 或 v-on:input
v-model	無	雙向數據綁定（表單輸入和組件）	v-model="message"
v-for	無	列表渲染（循環生成元素）	v-for="item in items"
v-if	無	條件渲染（根據條件銷毀/創建元素）	v-if="isVisible"
v-show	無	顯示/隱藏元素（通過 CSS 的 display 控制）	v-show="hasError"
v-html	無	輸出原始 HTML（注意 XSS 風險）	v-html="rawHtml"
v-text	無	更新元素的 textContent（覆蓋內容）	v-text="message"
v-pre	無	跳過該元素及其子元素的編譯（顯示原始 Mustache 標簽）	<div v-pre>{{ 不會被編譯 }}</div>
v-cloak	無	隱藏未編譯的 Mustache 標簽（需配合 CSS 使用）	[v-cloak] { display: none }
v-once	無	一次性渲染（元素/組件只渲染一次，后續數據變化不更新）	<span v-once>{{ staticText }}</span>
v-slot	#	定義插槽模板（用于具名插槽或作用域插槽）	<template #header>...</template>

說明：

1. v-bind 和 v-on：最常用的簡寫指令，: 用于動態綁定，@ 用于事件監聽。
2. v-model：語法糖，等價于 v-bind:value + v-on:input 的組合。
3. v-slot：在 Vue 3 中簡寫為 #，常用于具名插槽或作用域插槽。
4. 特殊指令：如 v-pre、v-cloak、v-once 用于優化或控制編譯過程。

示例

<template><div><h2>v-text</h2><div v-text="'hello vue'">hello world</div><h2>v-html</h2><div v-html="'<span style=&quot;color: red&quot;>hello vue</span>'">hello world</div><h2>v-show</h2><div v-show="show">hello vue</div><button @click="show = !show">change show</button><h2>v-if v-esle-if v-else</h2><div v-if="number === 1">hello vue {{ number }}</div><div v-else-if="number === 2">hello world {{ number }}</div><div v-else>hello geektime {{ number }}</div><h2>v-for v-bind</h2><div v-for="num in [1, 2, 3]" v-bind:key="num">hello vue {{ num }}</div><h2>v-on</h2><button v-on:click="number = number + 1">number++</button><h2>v-model</h2><input v-model="message"/><h2>v-pre</h2><div v-pre>{{ this will not be compiled }}</div><h2>v-once</h2><div v-once>{{ number }}</div></div>
</template>
<script>
export default {data: function () {this.log = window.console.log;return {show: true,number: 1,message: "hello"};}
};
</script>

自定義指令

<template><div><button @click="show = !show">銷毀</button><!--自定義指令 v-append-text --><button v-if="show" v-append-text="`hello ${number}`" @click="number++">按鈕</button></div>
</template>
<script>
export default {directives: {appendText: {bind() {console.log("bind");},inserted(el, binding) {el.appendChild(document.createTextNode(binding.value));console.log("inserted", el, binding);},update() {console.log("update");},componentUpdated(el, binding) {el.removeChild(el.childNodes[el.childNodes.length - 1]);el.appendChild(document.createTextNode(binding.value));console.log("componentUpdated");},unbind() {console.log("unbind");}}},data() {return {number: 1,show: true};}
};
</script>