Vue之自定義指令

先了解一下,在vue中,有很多內建的指令.

比如:等等.....

所以,關於指令,我們可以總結下面幾點:

2.0 vue自定義指令場景小demo(非常尬)

場景: 我們需要乙個指令,寫在某個html表單元素上,然後讓它在被載入到dom中時,自動獲取焦點.

//

和自定義過濾器一樣,我們這裡定義的是全域性指令
vue.directive('
focus',
})

'

'>
"text
">
"text
" v-focus placeholder="
我有v-focus,所以,我獲取了焦點
">

先總結幾個點:

指令的生命週期

其實上面個例子很尬!

html5 本身就提供了乙個autofocus的屬性,我們直接寫這個就ok了.

用指令我們需要:

非常的費時費力....

在說明,為什麼我要這麼麻煩的使用指令之前,可以先了解一下指令的一些基本知識.

上述例子中,我們寫了乙個叫inserted(){}的函式,

有了inserted就說明了,指令在繫結到 html 元素上時,肯定也是有一堆鉤子函式的,說白了也就是生命週期.

當乙個指令繫結到乙個元素上時,其實指令的內部會有五個生命週期事件函式.

先上官方說明:

vue.directive('

gqs'
,, inserted() ,
update() ,
componentupdated() ,
unbind() 
})

'

' v-gqs>

bind triggerd

inserted triggerd

那麼剩下的三個什麼時候觸發呢?

'

' >
if="
show
">v-if是刪除或者新建dom元素,它會觸發unbind指令宣告週期嗎?
"show=!show
">toggle

然後點選按鈕,發現果然如此.

當指令繫結的元素被銷毀時,會觸發指令的unbind事件.

(新建並顯示,仍然是觸發bind&inserted)

update()與conponentupdated()幾乎是伴隨觸發，先觸發update()函式，再觸發componentupdated()函式

注意：使用this.$refs.來修改隱藏、顯示、樣式、內容是無法觸發update()和componentupdated()

既然,指令並不是一次性的活.

當繫結指令的元素的狀態發生改變時(這裡主要是指元素繫結的vue資料發生改變時),仍然會觸發指令中的update函式.

那麼我們可以利用指令的簡寫形式,來做一些有意思的事情.

核心思想就是:

當乙個html元素設定了指令,那麼在這個元素的狀態發生改變時(由vue資料變化帶來的帶來的監控),我們可以利用update()鉤子函式監控到這個元素的變化,然後根據需要做一些其他的事情.

使用官方指定的指令簡寫模式:

vue.directive('

color-swatch
', function (el, binding) )

當元素的狀態發生改變時,就會觸發update

在寫demo之前,還需要了解一下指令鉤子函式的幾個引數.

vnode:vue編譯生成的虛擬節點.

oldvnode:上乙個虛擬節點,僅在update&componentupdated中可用.

vue.directive('

change-bgc
', (el, binding,vnode,oldvnode) =>`)
console.log(`binding.value:$`)
console.log(`binding.expression:$`)
console.log(`binding.arg:$`)
console.log(`binding.modifiers:$`)
console.log(`binging.oldvalue:$`)
console.log(`vnode:$`)
console.log(`oldvnode:$`)
})

binding.name:change-bgc

binding.value:
2binding.expression:
1+1binding.arg:foo
binding.modifiers:
binging.oldvalue:undefined
vnode:tag,data,children,text,elm,ns,context,fncontext,fnoptions,fnscopeid,key,componentoptions,componentinstance,parent,raw,isstatic,isrootinsert,iscomment,iscloned,isonce,asyncfactory,asyncmeta,isasyncplaceholder
oldvnode:,"
children
":,"
raw":false,"
isstatic
":false,"
isrootinsert
":true,"
iscomment
":false,"
iscloned
":false,"
isonce
":false,"
isasyncplaceholder
":false}

vue之自定義指令

1.如何自定義乙個指令？在export模板中加入directives選項 比如 directives bind el bind 像這樣的inserted,bind稱為鉤子函式，裡面的引數 el 代表當前指令被繫結的元件 bind 代表當前指令所繫結的元件的一些值，通常我們列印這兩個引數時，會返回整個...

Vue之自定義指令

vue中有很多內建的命令，例如v bind,v for,v show等等，這些指令的指責是將表示式改變時，將某些行為相應地對映到dom上。那麼除了我們常用的vue的內建指令外，我們還可以自定義指令，常用的自定義vue全域性指令的模板如下 這裡的focus是定義額指令的名稱，可根據指令作用換成其他名稱...

vue之自定義指令

1 自定義指令的作用 除了核心功能缺省內置的指令 v model和v show vue 也允許註冊自定義指令。注意，在 vue2.0 中，復用和抽象的主要形式是元件。然而，有的情況下，你仍然需要對普通 dom 元素進行底層操作，這時候就會用到自定義指令。參考文件 2 註冊自定義指令 1 註冊全域性自...