詳解Vue中的自定義指令
除了默認設置的核心指令( v-model 和 v-show )，Vue 也允許注冊自定義指令。在Vue里，代碼復用的主要形式和抽象是組件。然而，有的情況下，仍然需要對純 DOM 元素進行底層操作，這時候就會用到自定義指令。本文將詳細介紹Vue自定義指令
指令注冊
以一個input元素自動獲得焦點為例，當頁面加載時，使用autofocus可以讓元素將獲得焦點 。但是autofocus在移動版Safari上不工作?，F(xiàn)在注冊一個使元素自動獲取焦點的指令
指令注冊類似于組件注冊，包括全局指令和局部指令兩種
【全局指令】
使用Vue.diretive()來全局注冊指令
// 注冊一個全局自定義指令 v-focusVue.directive('focus', { // 當綁定元素插入到 DOM 中。
inserted: function (el) { // 聚焦元素 el.focus()
}
})
【局部指令】
也可以注冊局部指令，組件或Vue構造函數(shù)中接受一個 directives 的選項
var vm = new Vue({
el: '#example',
directives:{
focus:{
inserted: function (el) {
el.focus()
}
}
}
})
然后可以在模板中任何元素上使用新的 v-focus 屬性
<p id="example"> <input v-focus></p>
<script>// 注冊一個全局自定義指令 v-focusVue.directive('focus', { // 當綁定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus()
}
})var vm = new Vue({
el: '#example',
})</script>
鉤子函數(shù)
指令定義函數(shù)提供了幾個鉤子函數(shù)（可選）
【bind】
只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作
【inserted】
被綁定元素插入父節(jié)點時調用（父節(jié)點存在即可調用，不必存在于 document 中）
【update】
所在組件的 VNode 更新時調用，但是可能發(fā)生在其孩子的 VNode 更新之前。指令的值可能發(fā)生了改變也可能沒有。但是可以通過比較更新前后的值來忽略不必要的模板更新
【componentUpdated】
所在組件的 VNode 及其孩子的 VNode 全部更新時調用
【unbind】
只調用一次， 指令與元素解綁時調用
鉤子函數(shù)參數(shù)
鉤子函數(shù)被賦予了以下參數(shù)
【el】
指令所綁定的元素，可以用來直接操作 DOM
【binding】
一個對象，包含以下屬性：
name: 指令名，不包括 v- 前綴。
value: 指令的綁定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 傳給指令的參數(shù)。例如 v-my-directive:foo， arg 的值是 "foo"。
modifiers: 一個包含修飾符的對象。 例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。
【vnode】
Vue 編譯生成的虛擬節(jié)點
【oldVnode】
上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用
[注意]除了 el 之外，其它參數(shù)都是只讀的，盡量不要修改他們。如果需要在鉤子之間共享數(shù)據(jù)，建議通過元素的 dataset 來進行
下面是一個使用了這些參數(shù)的自定義鉤子樣例
<p id="example" v-demo:foo.a.b="message"></p>
<script>Vue.directive('demo', {
bind: function (el, binding, vnode) { var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})new Vue({
el: '#example',
data: {
message: 'hello!'
}
})</script>
【函數(shù)簡寫】
大多數(shù)情況下，可能想在bind和update鉤子上做重復動作，并且不想關心其它的鉤子函數(shù)?？梢赃@樣寫：
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
【對象字面量】
如果指令需要多個值，可以傳入一個JS對象字面量。指令函數(shù)能夠接受所有合法類型的JS表達式
<p v-demo="{ color: 'white', text: 'hello!' }"></p>
Vue.directive('demo', function (el, binding) {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
以上就是詳解Vue中的自定義指令的詳細內容，更多關于vue 自定義指令的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了vue+G6圖形化實現(xiàn)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了vue.js功能介紹 - 指令，組件詳細介紹及實例，詳細的介紹了指令和組件的用法，有興趣的可以了解一下。2017-04-04
這篇文章主要為大家詳細介紹了vue中漸進過渡效果的實現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Vue-router優(yōu)化import引入過多導致index文件臃腫問題
這篇文章主要為大家介紹了Vue-router優(yōu)化import引入過多導致index文件臃腫問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題
這篇文章主要介紹了vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue中的this.$options.data()和this.$data用法說明
這篇文章主要介紹了Vue中的this.$options.data()和this.$data用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關于Vue項目中如何使用Axios封裝http請求的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-10-10
這篇文章主要為大家詳細介紹了vue組件開發(fā)之tab切換組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
今天小編就為大家分享一篇vue 父組件通過$refs獲取子組件的值和方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)
工作時遇到的el-table合并單元格的需求，本文主要介紹了el-table表格動態(tài)合并相同數(shù)據(jù)單元格(可指定列+自定義合并)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07