基礎(chǔ)概念
主要是官網(wǎng)內(nèi)容奖慌，對(duì)指令的基本內(nèi)容進(jìn)行介紹
應(yīng)用情景：
對(duì)dom元素進(jìn)行操作時(shí)
分類：
- 全局指令
Vue.directive('name', {
inserted: function (el) {
// content
}
})
- 局部指令
directives: {
name: {
// content
}
}
使用 v-name，如<div v-name class="test">
鉤子函數(shù)
bind: 只調(diào)用一次松靡，指令第一次綁定到元素時(shí)調(diào)用简僧，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用击困，不必存在于 document 中）涎劈。
update: 被綁定元素所在的模板更新時(shí)調(diào)用广凸，而不論綁定值是否變化。通過(guò)比較更新前后的綁定值蛛枚，可以忽略不必要的模板更新谅海。
componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
unbind: 只調(diào)用一次蹦浦， 指令與元素解綁時(shí)調(diào)用扭吁。
如果是在bind和update上做操作，而不關(guān)心其它的盲镶，可以合并鉤子
Vue.directive('name', function (el, binding) {
// content
})
鉤子函數(shù)參數(shù)（el侥袜，binding，vnode溉贿，oldVnode）
- el 指令綁定的元素枫吧，可直接操作dom
- binding 是一個(gè)對(duì)象
- name 指令名，不包含v-
- value 指令綁定的值
- oldValue 指令綁定的前一個(gè)值宇色，僅在 update 和 componentUpdated 鉤子中可用九杂。無(wú)論值是否改變都可用。
- expression 綁定值的字符串形式 不會(huì)計(jì)算出來(lái) 例如 v-my-directive:foo宣蠕， arg 的值是 "foo"例隆。
- modifiers: 一個(gè)包含修飾符的對(duì)象。 例如： v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是 { foo: true, bar: true }抢蚀。
- vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)
- oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)镀层，僅在 update 和 componentUpdated 鉤子中可用。
- vnode
- oldVnode
項(xiàng)目使用
控制按鈕權(quán)限
根據(jù)不同的用戶角色控制按鈕是否出現(xiàn)
let btnObj =[] //存放有關(guān)按鈕的code碼 項(xiàng)目中是結(jié)合vuex一起的
// 移除
Vue.directive('btnCode', {
inserted: (el, binding) => {
if(!btnObj.includes(binding.value)){
console.log(el.parentNode.removeChild(el))
}
}
})
// display:none
Vue.directive('btnCodes', {
inserted: (el, binding) => {
if(!btnObj.includes(binding.value)){
console.log(el)
console.log(el.style.display = 'none')
}
}
})
使用
<el-button v-btnCode="'dbb'">test3</el-button>
// 這邊如果有需要也可以傳對(duì)象 v-btnCode="{key: value}" 在指令中的取值就是 binding.value.key
<el-button v-btnCodes="'aa'">test4</el-button>
以上是部分關(guān)于dirctive的代碼皿曲，實(shí)際項(xiàng)目中btn的code值會(huì)結(jié)合 vuex一起
延伸
remove() 和 display
