啟動(dòng)命令(vue啟動(dòng)命令)墻裂推薦

在Vue中，啟動(dòng)e啟指令都是命令以 v-xxx 命令，因此自定義指令也是動(dòng)命如此自定義指令時(shí)，指令名稱不需要加前綴v-,令墻裂推但在調(diào)用的時(shí)候一定要加前綴v-自定義一個(gè)

在Vue中，指令都是啟動(dòng)e啟以 v-xxx 命令，因此自定義指令也是命令如此自定義指令時(shí)，指令名稱不需要加前綴v-,動(dòng)命但在調(diào)用的時(shí)候一定要加前綴v-自定義一個(gè)獲取焦點(diǎn)的指令 v-focus//定義一個(gè)全局的指令（directive：指令）

//參數(shù)1為指令名稱，定義的令墻裂推時(shí)候，不需要加 v- ，啟動(dòng)e啟調(diào)用時(shí)需要v- ,命令//參數(shù)2是對(duì)象，對(duì)象中有指令相關(guān)函數(shù)，動(dòng)命在特定時(shí)候運(yùn)行，令墻裂推 Vue.directive(focus,啟動(dòng)e啟{ //獲取當(dāng)前指令(v-focus)綁定的元素e，e.focus()方法在綁定元素插入到DOM中時(shí)調(diào)用

inserted:function(e){ e.focus() } }) //等同于js中： var e = document.getElementById("e")// e.focus()

//局部指令定義,命令vm實(shí)例中directives:{ focus:{ inserted:function(e){ e.focus() } } }鉤子函數(shù)：

bind:只調(diào)用一次，第一次綁到到元素時(shí)調(diào)用，動(dòng)命一般用在初始化中，在inserted之前，此時(shí)父節(jié)點(diǎn)為null，在dom樹(shù)繪制之前調(diào)用，一般用作初始化屬性（樣式、元素屬性）的設(shè)置，綁定后屬性就已經(jīng)在當(dāng)前元素中了。

inserted:被綁定元素插入到父節(jié)點(diǎn)時(shí)調(diào)用，父節(jié)點(diǎn)存在即可，只調(diào)用一次，在dom樹(shù)繪制之后調(diào)用，一般用作初始化方法（js的行為方法）的設(shè)置，綁定到DOM中后立即執(zhí)行一次updated:所在的組件更新時(shí)調(diào)用,在。

componentUpdated之前調(diào)用，更新前的狀態(tài)，多次調(diào)用componentUpdated:所在的組件及及子元素全部更新時(shí)調(diào)用，更新后的狀態(tài)，多次調(diào)用unbind:只調(diào)用一次，指令與元素解綁時(shí)調(diào)用

Vue.directive(指令名稱,{ //指令綁定到元素上的時(shí)候會(huì)立即執(zhí)行，一般用作初始化，只執(zhí)行一次，當(dāng)指令剛被綁定到元素的時(shí)候，還沒(méi)有插入到DOM樹(shù)中去//綁定時(shí)不管有沒(méi)有插入到DOM中，已經(jīng)有了value="" 和 style="color:red"的屬性

//bind因此可以做一些初始化屬性的設(shè)置bind:function (e) { e.value = "文本框初始值" e.style.color =

red }, inserted:function (e) { //元素插入到DOM樹(shù)中后會(huì)立即執(zhí)行一次，可作初始化方法的設(shè)置 e.focus() },

updated:function (e) { //vnode更新的時(shí)候會(huì)執(zhí)行，可觸發(fā)多次 }, componentUpdated

:function (e) { }, unbind:function (e) { } })

"text" v-focus>鉤子函數(shù)參數(shù)：el:指令被綁定的當(dāng)前元素，即當(dāng)前指令所在的元素，此參數(shù)名可以變更，其他參數(shù)名不能變更binding:name:指令名，不包括v-前綴value:指令綁定值，v-color=" blue "，"1+1"為2

oldValue:指令綁定的前一個(gè)值expression:指令綁定值的字符串形式"1+1"就是"1+1"而不是2arg:傳遞給指令的參數(shù)v-color:bluemodifiers:包含修飾符對(duì)象 v-mydirective.foo.bar

modifiers為{foo.true,bar,true}3.vnode:vue編譯器生成的虛擬節(jié)點(diǎn)4.oldVnode:上一個(gè)虛擬節(jié)點(diǎn)Vue.directive("color",{ bind:

function(e,binding) { e.style.color = binding.value e.style.color = binding.

arg } }) //注意單引號(hào)，否則blue為data中數(shù)據(jù)

type="text" v-focus v-color:blue>自定義指令的簡(jiǎn)寫(xiě)如果只有bind或updated鉤子函數(shù)，則可以簡(jiǎn)寫(xiě)Vue.directive("color", (e,binding) => { e.style.color = binding.value e.style.color = binding.

arg }) //注意單引號(hào)，否則blue為data中數(shù)據(jù) <

inputtype="text" v-focus v-color:blue>