前言
在前端基礎面試中，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指令在Vue中，指令其實就是特殊的屬性
Vue會根據指令，在背後做一些事，至於具體做什麼事，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個內置指令的基本使用2.2.1 v-textv-text的作用是，用於更新元素的 textContent，例如：
<h1v-text="msg"></h1>h1元素的內容最終取決於msg的值
image.png2.2.2 v-html與v-text很像，只是v-html用於更新元素的 innerHTML，例如
<divv-html="'<h1>HelloLBJ</h1>'"></div>
image.png需要注意的是，裡頭內容必須是按普通 HTML 插入
2.2.3 v-showv-show可以根據表達式的真假值，切換元素的display值，用於控制元素的展示和隱藏，例如：
動畫23.gif可以看到，當條件變化時該指令觸發顯示或隱藏的過渡效果
需要注意：v-show 不支持 <template> 元素，也不支持 v-else
2.2.4 v-ifv-if用於根據表達式的真假值來有條件地渲染元素
與v-show相比，v-if在切換時是元素的銷毀或重建，而不是簡單的顯示隱藏
image.png可以看到當表達式為假時，v-if是直接銷毀元素，而v-show只是視覺上隱藏了而已
並且v-if可以是 <template>，如果元素是 <template>，將提取它的內容作為條件塊
2.2.5 v-elsev-else無需表達式，表示添加一個「else 塊」，相當於v-if滿足條件時展示v-if的元素，否則展示v-else的元素，例如：
動畫24.gif需要注意：v-else前一個兄弟元素必須有 v-if 或 v-else-if
2.2.6 v-else-if同理，表示 v-if 的「else if 塊」，和v-else一樣，前一個兄弟元素必須有v-if或 v-else-if，例如：
動畫25.gif2.2.7 v-forv-for一個用於迭代的指令，可以根據源數據多次渲染元素或模板塊，例如：
image.png也可以為數組索引指定別名或者用於對象的鍵
<divv-for="(item,index)initems"></div><divv-for="(value,key)inobject"></div><divv-for="(value,name,index)inobject"></div>2.2.8 v-onv-on用於給元素綁定事件，可以縮寫為：@
修飾符
例如：
<!--停止冒泡--><button@click.stop="doThis"></button>需要注意，用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件
2.2.9 v-bindv-bind用於綁定數據和元素屬性，可以縮寫為: 或.(當使用 .prop 修飾符時)，比如
<div:someProperty.prop="someObject"></div><!--相當於--><div.someProperty="someObject"></div>v-bind的3個修飾符
v-model限制於：<input> <select> <textarea> components
v-model的3個修飾符：
在表單控件或者組件上可以創建雙向綁定，例如：
動畫26.gif2.2.11 v-slotv-slot用於提供具名插槽或需要接收 prop 的插槽
可選擇性傳遞參數，表示插槽名，默認值default
2.2.12 v-prev-pre指令用於跳過這個元素及其子元素的編譯過程，例如:
image.png可以看到裡頭的東西沒有被編譯
2.2.13 v-cloakv-cloak指令主要用於解決插值表達式在頁面閃爍問題
<divv-cloak>{{message}}</div>[v-cloak]{display:none;}這樣div只會在編譯結束後顯示
2.2.14 v-oncev-once指令用於表示只渲染一次，當要重新渲染，元素/組件及其所有的子節點將被視為靜態內容並跳過
2.2.15 v-memo 3.2+用於緩存一個模板的子樹
該指令接收一個固定長度的數組作為依賴值進行記憶比對。如果數組中的每個值都和上次渲染的時候相同，則整個該子樹的更新會被跳過
<divv-memo="[valueA,valueB]"></div>在重新渲染時，如果 valueA 與 valueB 都維持不變，那麼對這個 <div> 以及它的所有子節點的更新都將被跳過
2.2.16 v-is已在 3.1.0 中廢棄，改用:is
<component:is="currentView"></component>3. 自定義指令3.1 如何自定一個指令3.1.1 全局自定義指令前言部分我們也說了，在Vue3中可以通過應用實例身上的directive()註冊一個全局自定義指令。例如官方給的一個例子
constapp=Vue.createApp({})//註冊一個全局自定義指令`v-focus`app.directive('focus',{//當被綁定的元素掛載到DOM中時……mounted(el){//聚焦元素el.focus()}})上述代碼中，通過Vue.createApp({})得到應用實例app，應用實例app身上有個directive()，用於創建一個全局的自定義指令
用的時候也非常簡單，例如
<inputv-focus/>3.1.2 註冊局部指令如果想註冊局部指令，可在組件中配置directives選項來註冊局部指令；還是以v-focus為例：
directives:{focus:{//指令的定義mounted(el){el.focus()}}}3.1.3 疑問通過上述例子，我們可以看到不管是使用directive自定義全局指令，還是使用directives配置局部指令，裡頭都需要一個指令名，如focus
而具體的配置對象中的mounted是啥？mounted中的el又是啥？除了mounted還有啥，除了el還有哪些參數？
3.1.4 鈎子函數（7個）開門見山，mounted其實就是指令的鈎子函數，表示組件被掛載後調用；el則是指令綁定到的元素
這裡主要講講鈎子函數，除了mounted以外，還有其他指令鈎子，均為可選
鈎子函數的4個參數都是可選，分別是
了解了基本知識，我們可以手動封裝一個自定義指令v-pin，表示將一個東西定在頁面上
3.2.1 創建Vue項目首先，使用vite搭建Vue3項目
npminitvite@latest最後根據提示，使用npm run dev啟動項目
image.png當然你也可以用其他方
我們知道Vue 自定義指令有全局註冊和局部註冊兩種方式，為了方便，我就將v-pin註冊在全局
3.2.2 實現效果我要講任意的定在指定的位置，比如將上圖中的logo定位在右上角，代碼如下：
//main.jsimport{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)app.directive('pin',{mounted(el,binding){//是否要定住varpinned=binding.value;//傳入的修飾符，表示定在哪裡varposition=binding.modifiers;//傳遞給指令的參數，可以表示定在的重要度varargs=binding.arg;if(pinned){el.style.position='fixed';if(args=="warning"){//簡單設置樣式，以示區分el.style.backgroundColor="pink";}for(varvalinposition){if(position[val]){el.style[val]='10px';}}}else{el.style.position='static';el.style.backgroundColor="";}}})app.mount('#app')使用也很簡單，如下
image.png結果如圖：
image.png3.2.3 完善結構為了方便以後註冊更多的自定義指令，我們修改代碼結構
首先，新創建一個專門用於放指令的文件夾directives
然後將每個自定義指令寫成一個對象並導出，如下directives\pin.js
constpin={mounted(el,binding){//是否要定住varpinned=binding.value;//傳入的修飾符，表示定在哪裡varposition=binding.modifiers;//傳遞給指令的參數，可以表示定在的重要度varargs=binding.arg;if(pinned){el.style.position='fixed';if(args=="warning"){el.style.backgroundColor="pink";}for(varvalinposition){if(position[val]){el.style[val]='10px';}}}else{el.style.position='static';el.style.backgroundColor="";}}}exportdefaultpin接着，在directives文件夾下創建index.js，將所有的指令都導入到這，放在directives中，然後導出一個install方法
importpinfrom'./pin'constdirectives={pin}exportdefault{install(app){Object.keys(directives).forEach((key)=>{app.directive(key,directives[key])})},}最後就是在main.js中，通過use()來調用install方法，於是將所有的指令批量註冊了
import{createApp}from'vue'importAppfrom'./App.vue'importDirectivesfrom'./directives'constapp=createApp(App)app.use(Directives)app.mount('#app')刷新之後，結果還是一樣
image.png好處是，以後再寫自定義指令就方便太多了
結語通過本文，我們了解16個Vue指令，以及如何手動封裝一個自定義指令
以上就是本文的所有內容，如果問題歡迎留言告知 🌹
來源：https://juejin.cn/post/7049233225708732429
留言列表