從0開始了解16個Vue指令到手動封裝自訂指令

這篇文章為大家帶來了關於Vue指令和手動封裝自訂指令的相關知識，希望對大家有幫助。

在前端基礎面試中，Vue的指示算是一個高頻面試題

面試官問：Vue有哪些指令？

你就告訴他：截止到Vue3.2，Vue一共有16個自帶指令，包含了：

v-text、v-html、v-show、v-if 、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once、v-memo、v-is ，其中v-memo是3.2新增的，v-is在3.1.0中廢棄

若面試官進一步問：如何封裝一個自訂指令？

你就告訴他：自訂指令要分全域自訂指令和局部指令；在Vue3中可以透過應用實例身上的directive()註冊一個全域自訂指令，如果想註冊局部指令，可在元件中設定directives選項來註冊局部指令

看完本文，你將全面了解16個Vue指令以及掌握如何自訂一個指令

1. 簡介

##1.1 什麼是Vue指令

##1.2 有什麼特點Vue指令有個明顯的特點就是，都是以v-開頭，例如：v-text

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

2. 內建指令

2.1 Vue有哪些內建指令呢內建指令指的就是Vue自帶指令，開箱即用

Vue一共有16個自帶指令，包括了：

v-text、v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、 v-cloak、v-once、v-memo、v-is，其中v-memo是3.2新增的，v-is在3.1.0中廢棄

下面我們來了解一下這些內建指令的基本使用

2.2 了解16個內建指令的基本使用

#v-text的作用是，用於更新元素的textContent，例如：

<h1 v-text="msg"></h1>

h1元素的內容最終取決於msg的值

與v-text很像，只是v-html用來更新元素的innerHTML，例如

<div v-html="&#39;<h1>Hello LBJ</h1>&#39;"></div>

要注意的是，裡頭內容必須是按普通HTML 插入

v-show可以根據表達式的真假值，切換元素的display值，用於控制元素的展示和隱藏，例如：

#可以看到，當條件變化時該指令觸發顯示或隱藏的過渡效果

需要注意：v-show 不支援