image.png

1. 基礎(chǔ)指令

指令帶有前綴 v-（Angular指令帶有前綴 ng-），表示是由 Vue 提供的專用屬性?；镜腣ue指令有：v-bind，v-if，v-for，v-on，v-mode，v-show，v-text，v-html，v-bind:class，v-style，v-once，v-cloak，v-pre

① v-bind：綁定DOM元素屬性（還可通過插值的方式綁定），可以將數(shù)據(jù)綁定到文本和屬性，也可以將數(shù)據(jù)綁定到 DOM結(jié)構(gòu)

② v-if：條件指令 (v-else,v-else-if) 【和v-show對比的區(qū)別 就是是否刪除dom節(jié)點 默認值為false】

image.png

③ v-for：循環(huán)指令 【格式 v-for="字段名 in(of) 數(shù)組json"】

image.png

④ v-on：添加事件監(jiān)聽 【快捷方法 ----@click*】

image.png

⑤ v-mode：數(shù)據(jù)和狀態(tài)之間進行雙向綁定

image.png

⑥ v-show：顯示與隱藏 【傳遞的值為布爾值 true false 默認為false】

image.png

⑦ v-text：解析文本【不能解析html標(biāo)簽】

image.png

⑧ v-html：解析文本,能解析html標(biāo)簽

image.png

⑨ v-bind:class：樣式類名

image.png

⑩ v-style：樣式

? v-once：加載一次

image.png

? v-cloak：防止閃爍

image.png

? v-pre：把標(biāo)簽內(nèi)部的元素原位輸出

image.png

2.****自定義指令

自定義指令是用來操作DOM的。盡管Vue推崇數(shù)據(jù)驅(qū)動視圖的理念，但并非所有情況都適合數(shù)據(jù)驅(qū)動。自定義指令就是一種有效的補充和擴展，不僅可用于定義任何的DOM操作，并且是可復(fù)用的。

① 語法格式：

image.png

傳入的兩個參數(shù)，id是指指令I(lǐng)D，definition是指定義對象。其中，定義對象可以提供一些鉤子函數(shù)

② 相關(guān)鉤子函數(shù)

image.png

③ 指令鉤子函數(shù)參數(shù)

image.png

除了 el 之外的其他參數(shù)，都應(yīng)該是只讀的，并且永遠不要去修改它們。如果你需要通過鉤子函數(shù)共享信息數(shù)據(jù)，推薦通過元素的 dataset 來實現(xiàn)

④ 示例

image.png

image.png

⑤ 常見使用例子

image.png

在許多情況下，可能只需要在 bind 和 update 鉤子函數(shù)上定義過相同的行為就足夠了，而無需關(guān)心其他鉤子函數(shù)。例如：

image.png

如果指令需要多個值，你還可以向指令傳入 JavaScript 對象字面量（包圍在一對花括號中的零或多個”名/值“對）。記住，指令能夠接收所有有效的 JavaScript 表達式

image.png

⑥ 自定義指令的使用示例