vue自定義指令模擬v model指令

通常情況下，vue內建的指令並不能夠滿足我們日常開發的要求，我們則可以根據實際需要進行自定義指令，本篇部落格將記錄vue自定義指令模擬v-model的過程，有什麼錯誤的地方歡迎批評指正。

資料雙向繫結

指令引數屬性

總結

// 全域性建立
vue.
directive
("slice",,
update
(el,bindings,vnode)
,inserted
(el)})
// 區域性建立
newvue(,
update
(el, bindings, vnode)
,inserted
(el)}}
})

建立自定義指令分為全域性建立和區域性建立，自定義指令有三個鉤子函式（ bind、update和inserted ）鉤子函式

引數描述

bind

el，bindingd，vnode

繫結指令時觸發

update

el，bindingd，vnode

資料更新數觸發

inserted

el插入到頁面時觸發

其中el代表著當前元素，bindings為乙個物件，vnode是虛擬dom。

比如說當我想要在頁面載入完成後input框獲取焦點，我們可以這樣寫

>
type
="text"
v-slice
>
div>
>
vue.
directive
("slice",,
update
(el, bindings, vnode)
,inserted
(el, bindings, vnode)})
newvue()
script
>

指令可以傳遞變數，我們可以通過bindings物件中的expression獲取引數值的變數名。

>
type
="text"
v-slice
="content"
>
div>
>
vue.
directive
("slice",,
update
(el, bindings, vnode)
,inserted
(el, bindings, vnode)})
newvue(}
)script
>

有了自定義的引數值的變數名，我們就可以在vnode中獲取到變數的資料

>
type
="text"
v-slice
="content"
>
div>
>
vue.
directive
("slice",,
update
(el, bindings, vnode)
,inserted
(el, bindings, vnode)})
newvue(}
)script
>

有了變數的資料，我們可以將資料設定為input框的value值。

>
type
="text"
v-slice
="content"
>
}div
>
>
vue.
directive
("slice",,
update
(el, bindings, vnode)
,inserted
(el, bindings, vnode)})
newvue(}
)script
>

我們為元素繫結輸入事件，每次輸入時將資料更新到data中。

>
type
="text"
v-slice
="content"
>
} div
>
>
vue.
directive
("slice",}
,update
(el, bindings, vnode)
,inserted
(el, bindings, vnode)})
newvue(}
)script
>

指令可以新增引數和一些指令，這些都被儲存在bindings中。

>
type
="text"
v-slice:11.number
="content"
>
}div
>

>
type
="text"
v-slice:11.number
="content"
>
}div
>
>
vue.
directive
("slice"
,// 限制長度
var length = bindings.arg;
if(length)},
update
(el, bindings, vnode)},
inserted
(el, bindings, vnode)})
newvue(}
)script
>

>
"text" v-slice:
11.number=
"content"
>
}<
/div>
vue.
directive
("slice"
,// 限制長度
var length = bindings.arg;
if(length)
// 設定為number
var isnumber = bindings.modifiers.number;
if(isnumber)},
update
(el, bindings, vnode)
// 設定為number
var isnumber = bindings.modifiers.number;
if(isnumber)},
inserted
(el, bindings, vnode)})
newvue(}
)<
/script>

就這樣，乙個自定義的指令完成了，我們從以上的自定義中簡化的模擬了v-model的指令，當然也可以你自定義其他的指令，快去試一下吧~

Vue自定義指令

vue有很多內建的指令，比如說v on，v model，v clock等等，每乙個指令會完成一定的功能，但是這些內建的指令總會有些侷限性，要是能夠自定義指令就好了 vue的自定義指令分類全域性指令和區域性指令 vue指令的定義和用法以全域性指令為例 1.語法 vue.directive 指令id...

vue自定義指令

自定義指令主要有兩種方式。一是在元件裡以directives的選項來自定義指令的內容。這樣的自定義指令是區域性的自定義指令，只在當前的元件裡面才能使用。script export default directives arr arr.join el.style.csstext arr script ...

VUE 自定義指令

dom插入便獲取焦點 vue.directive focus 根據指令的值決定自否獲取焦點 vue.directive focus 注被拖拽的元素必須有定位樣式 vue.directive drag function el,binding document.nm useup function 拓展...

vue自定義指令模擬v model指令

Vue自定義指令

vue自定義指令

VUE 自定義指令

相關推薦