前言

Vue.js 是一款流行的前端框架，它通過(guò)指令（Directive）實(shí)現(xiàn)了對(duì) DOM 元素的控制，使得開(kāi)發(fā)者能夠更加方便地管理頁(yè)面的展示和交互。下面是 Vue.js 常用指令及其使用場(chǎng)景：

1. v-text / {{ expression }}

v-text 指令可以用來(lái)將元素的文本內(nèi)容設(shè)置為指定的值，{{ expression }} 語(yǔ)法也可以實(shí)現(xiàn)同樣的效果。

使用方式如下：

<template><div><span v-text="message"></span><span>{{ message }}</span></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!',}},
}
</script>

在上面的代碼中，使用 v-text 指令和 {{ expression }} 語(yǔ)法將 message 數(shù)據(jù)對(duì)象中的值顯示在元素中。

2.v-html

v-html 指令可以用來(lái)將元素的 HTML 內(nèi)容設(shè)置為指定的值。

使用方式如下：

<template><div v-html="htmlContent"></div>
</template><script>
export default {data() {return {htmlContent: '<h1>Hello, Vue!</h1>',}},
}
</script>

在上面的代碼中，使用 v-html 指令將 htmlContent 數(shù)據(jù)對(duì)象中的值作為 HTML 內(nèi)容渲染在元素中。

3.v-bind

v-bind 指令可以用來(lái)動(dòng)態(tài)地綁定 HTML 特性，例如元素的 class、style、href 等。通過(guò)將值綁定到 Vue.js 組件實(shí)例中的數(shù)據(jù)，可以輕松地動(dòng)態(tài)更新元素。

使用方式如下：

<template><div v-bind:class="{ active: isActive }">{{ message }}</div>
</template><script>
export default {data() {return {isActive: true,message: 'Hello, Vue!',}},
}
</script>

在上面的代碼中，使用 v-bind:class 指令將組件實(shí)例中的 isActive 數(shù)據(jù)動(dòng)態(tài)地綁定到 div 元素的 class 中，根據(jù) isActive 的值動(dòng)態(tài)地添加或刪除 active 類。

除了簡(jiǎn)寫(xiě)的 v-bind:class，也可以寫(xiě)成 v-bind:style、v-bind:href 等形式，根據(jù)需要?jiǎng)討B(tài)地綁定元素的不同特性。

同時(shí)，為了簡(jiǎn)化模板語(yǔ)法，Vue.js 還提供了縮寫(xiě)的語(yǔ)法形式，在指令名前加上冒號(hào)即可，例如 :class=“{ active: isActive }”，與 v-bind:class=“{ active: isActive }” 效果相同。

4.v-on

v-on 指令可以用來(lái)綁定元素的事件或組件的自定義事件。

使用方式如下：

<template><div><button v-on:click="onClick">點(diǎn)擊</button><my-component v-on:custom-event="onCustomEvent"></my-component></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {'my-component': MyComponent,},methods: {onClick() {console.log('Button clicked');},onCustomEvent(payload) {console.log('Custom event triggered with payload:', payload);},},
}
</script>

在上面的代碼中，使用 v-on 指令綁定了 button 元素的 click 事件和 my-component 組件的 custom-event 自定義事件，并通過(guò) methods 屬性定義了對(duì)應(yīng)的事件處理函數(shù)。

5. v-model

v-model 指令可以用來(lái)在表單元素（如 input、select、textarea 等）和 Vue.js 組件實(shí)例中的數(shù)據(jù)之間建立雙向綁定。這意味著當(dāng)用戶在表單元素中輸入數(shù)據(jù)時(shí)，Vue.js 組件實(shí)例中的數(shù)據(jù)會(huì)自動(dòng)更新；反之，當(dāng) Vue.js 組件實(shí)例中的數(shù)據(jù)更新時(shí)，表單元素中的數(shù)據(jù)也會(huì)自動(dòng)更新。

使用方式如下：

<template><input v-model="message" /><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'Hello, Vue!',}},
}
</script>

在上面的代碼中，使用 v-model 指令將 input 元素的值與組件實(shí)例中的 message 數(shù)據(jù)建立雙向綁定。當(dāng)用戶在 input 元素中輸入數(shù)據(jù)時(shí)，組件實(shí)例中的 message 數(shù)據(jù)會(huì)自動(dòng)更新；反之，當(dāng)組件實(shí)例中的 message 數(shù)據(jù)更新時(shí)，input 元素中的值也會(huì)自動(dòng)更新。同時(shí)，div 元素中的文本內(nèi)容也會(huì)隨著 message 數(shù)據(jù)的更新而動(dòng)態(tài)更新。

除了上面的例子中使用的 input 元素，v-model 指令還可以用在 select、textarea 等表單元素中，根據(jù)需要建立雙向綁定。

6.v-for

v-for 指令可以用來(lái)根據(jù)數(shù)據(jù)對(duì)象中的屬性循環(huán)渲染元素。

使用方式如下：

<template><ul><li v-for="item in items" :key="item.id">{{ item.text }}</li></ul>
</template><script>
export default {data() {return {items: [{ id: 1, text: 'Item 1' },{ id: 2, text: 'Item 2' },{ id: 3, text: 'Item 3' },],}},
}
</script>

在上面的代碼中，使用 v-for 指令根據(jù) items 數(shù)據(jù)對(duì)象中的屬性循環(huán)渲染 li 元素。

7.v-if / v-else-if / v-else

v-if / v-else-if / v-else 指令可以用來(lái)根據(jù)條件判斷動(dòng)態(tài)地顯示或隱藏元素。

使用方式如下：

<template><div><div v-if="isShown">This is shown</div><div v-else-if="isHidden">This is hidden</div><div v-else>This is default</div></div>
</template><script>
export default {data() {return {isShown: true,isHidden: false,}},
}
</script>

在上面的代碼中，使用 v-if / v-else-if / v-else 指令根據(jù)條件動(dòng)態(tài)地顯示或隱藏了三個(gè) div 元素。

9.v-show

v-show 指令可以用來(lái)根據(jù)條件判斷動(dòng)態(tài)地顯示或隱藏元素，與 v-if 不同的是，v-show 是通過(guò)設(shè)置元素的 display 樣式來(lái)實(shí)現(xiàn)的。

使用方式如下：

<template><div><div v-show="isShown">This is shown</div><div v-show="isHidden">This is hidden</div></div>
</template><script>
export default {data() {return {isShown: true,isHidden: false,}},
}
</script>

在上面的代碼中，使用 v-show 指令根據(jù)條件動(dòng)態(tài)地顯示或隱藏了兩個(gè) div 元素。

10.v-cloak

v-cloak 指令可以用來(lái)在 Vue.js 加載時(shí)防止元素顯示未編譯的 Mustache 標(biāo)簽。

使用方式如下：

<template><div v-cloak>{{ message }}</div>
</template><style>
[v-cloak] {display: none;
}
</style><script>
export default {data() {return {message: 'Hello, Vue!',}},
}
</script>

在上面的代碼中，使用 v-cloak 指令在 div 元素顯示之前防止 Mustache 標(biāo)簽的未編譯顯示，并設(shè)置了 [v-cloak] 樣式以使元素在 Vue.js 加載完成之前隱藏。

11.v-pre

v-pre 指令可以用來(lái)防止 Vue.js 將指令中的表達(dá)式進(jìn)行編譯，保留原始的文本內(nèi)容。

使用方式如下：

<template><div v-pre>{{ message }}</div>
</template><script>
export default {data() {return {message: 'Hello, Vue!',}},
}
</script>

在上面的代碼中，使用 v-pre 指令保留了 div 元素中的原始文本內(nèi)容，而不進(jìn)行編譯。

12.組件注冊(cè)指令

Vue.component
Vue.component 方法可以用來(lái)注冊(cè)全局組件。

使用方式如下：

<template><div><my-component></my-component></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {components: {'my-component': MyComponent,},
}
</script>

在上面的代碼中，使用 Vue.component 方法注冊(cè)了一個(gè)名為 my-component 的全局組件，并在模板中使用了該組件。

13.動(dòng)態(tài)組件指令

keep-alive / component
keep-alive 和 component 指令可以用來(lái)動(dòng)態(tài)地渲染組件，通過(guò)設(shè)置不同的組件名或組件實(shí)例來(lái)實(shí)現(xiàn)組件的動(dòng)態(tài)切換。

使用方式如下：

<template><div><component v-bind:is="currentComponent"></component><button v-on:click="switchComponent">切換組件</button></div>
</template><script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';export default {data() {return {currentComponent: 'component-a',}},components: {'component-a': ComponentA,'component-b': ComponentB,},methods: {switchComponent() {this.currentComponent = this.currentComponent === 'component-a' ? 'component-b' : 'component-a';},},
}
</script>

在上面的代碼中，通過(guò)設(shè)置 v-bind:is 屬性來(lái)動(dòng)態(tài)渲染組件，通過(guò) v-on:click 事件來(lái)切換組件。

14.自定義指令

Vue.directive
Vue.directive 方法可以用來(lái)注冊(cè)自定義指令。

使用方式如下：

<template><div v-my-directive>自定義指令</div>
</template><script>
export default {directives: {'my-directive': {inserted: function (el) {el.style.color = 'red';}}},
}
</script>

在上面的代碼中，通過(guò) Vue.directive 方法注冊(cè)了一個(gè)名為 my-directive 的自定義指令，并在模板中使用了該指令。

15.過(guò)濾器指令

Vue.filter
Vue.filter 方法可以用來(lái)注冊(cè)全局過(guò)濾器。

使用方式如下：

<template><div>{{ message | reverse }}</div>
</template><script>
export default {data() {return {message: 'Hello, Vue!',}},filters: {reverse: function (value) {return value.split('').reverse().join('');}},
}
</script>

在上面的代碼中，通過(guò) Vue.filter 方法注冊(cè)了一個(gè)名為 reverse 的全局過(guò)濾器，并在模板中使用了該過(guò)濾器。

以上就是 Vue.js 中常用的指令及其使用場(chǎng)景。希望能夠幫助你更好的理解vue指令。歡迎轉(zhuǎn)發(fā)或在評(píng)論區(qū)交流討論。