Vue 自定義指令鉤子函式

除了核心功能缺省內置的指令，vue也允許註冊自定義指令

頁面載入後，讓文字框自動獲取焦點，原生js做法是獲取文字框元素後呼叫focus()方法，但vue不建議手動操作dom元素，所以此時要自定義指令

這裡需要注意的是v-on指令繫結focus事件的方式是實現不了上面需求的，區別就像onfocus和focus()，前者是事件繫結，當元素獲得焦點時去執行事件處理函式，而後者是方法，呼叫後會讓元素獲得焦點，onclick和click()同理

自定義全域性指令

vue.directive( ' 自定義指令名 ' , )

引數一是指令的名字，注意定義的時候指令前不需要加 v- 字首，但呼叫的時候必須加上這個字首

引數二是乙個物件，在這物件身上有一些指令相關的函式，這些函式可以在特定階段執行相關的操作，叫鉤子函式

<
body
>
<
div 
id>
<
input 
type
="text"
id="text"
v-focus
>
div>
<
script
>
//註冊乙個全域性自定義指令
vue.directive(
'focus
', ,
//inserted表示元素插入到dom中時，會執行inserted函式，只觸發一次，el表示被繫結的那個原生js物件
inserted: 
function
(el) ,
//當vnode更新時會執行updated，可能觸發多次
updated:
function
()    })
varvm 
=new
vue(
})script
>
body
>

鉤子函式我覺得跟原生事件註冊方式相似 dom.onclick = function() ，就是有些狀態會被vue捕捉並貼上名字（如bind這個名字代表指令繫結到了元素上），名字是為了讓我們可以將自定義處理函式「鉤」在上面，這樣，我們就可以決定哪種狀態做哪種事

在這個案例中，el.focus()不可放在bind函式裡，因為指令雖然繫結到了元素上，但元素還沒有插入到dom中也就是元素還在記憶體中沒有被渲染到頁面上，這時在記憶體呼叫focus方法沒有作用，而inserted則表示元素已經載入到網頁上了，此時使用focus才是有效的

自定義全域性指令，指定文字框文字顏色

vue.directive('color', 
})

因為是樣式，所以不需要元素插入到dom中，就好像link引入css檔案時並不關心元素是否載入

和js行為有關的操作，最好在inserted中執行，和樣式相關的操作都可在bind中執行

鉤子函式第乙個引數是被繫結的原生dom元素，第二個元素是乙個binding物件，該物件有三個重要的屬性name、value和expression

})自定義私有指令自定義私有指令跟自定義過濾器的套路是一樣的，在建構函式裡定義

var vm = new
vue(}}
})

函式簡寫

也就是如果只用到bind或update，就可省略指令定義物件的書寫

Vue 自定義指令鉤子函式

VUE自定義指令鉤子函式講解

Vue自定義指令與鉤子函式

自定義指令（鉤子函式）

Vue 自定義指令 鉤子函式

VUE自定義指令鉤子函式講解

Vue自定義指令與鉤子函式

自定義指令（鉤子函式）

相關推薦

Vue 自定義指令鉤子函式