自定義指令：自己定義的指令，可以封裝一些dom操作，擴(kuò)展額外功能?？煞譃槿肿?cè)與? ? ? ? ? ? ? ? ? ? ? ? 局部注冊(cè)。

全局注冊(cè)（main.js中注冊(cè)）：

Vue.directive('指令名稱(chēng)',{

? ? ? ? bind(ele,binding) {},? // 只執(zhí)行一次；DOM渲染之前執(zhí)行，里面可以進(jìn)行樣式操作

????????inserted(ele,binding) {},? // 只執(zhí)行一次；DOM渲染之后執(zhí)行，里面可以進(jìn)行行為操作 ????????????????????????????????????????????????--常用

????????update(ele,binding) {}, // 數(shù)據(jù)更新后執(zhí)行--常用

????????componentUpdated(ele,binding) {}, // 父子組件都更新后執(zhí)行

? ? ? ? unbind(ele,binding) {}, // 指令解綁的時(shí)候執(zhí)行

})

?局部注冊(cè)（main.js中注冊(cè)）：

export default {

????????Vue.directive('指令名稱(chēng)',{

? ? ? ? ????????bind(ele,binding) {},? // 只執(zhí)行一次；DOM渲染之前執(zhí)行，里面可以進(jìn)行樣式操作

????????????????inserted(ele,binding) {},? // 只執(zhí)行一次；DOM渲染之后執(zhí)行，里面可以進(jìn)行行? ?????????????????????????????????????????????????????????????為操作--常用

? ? ? ? ? ? ? ??update(ele,binding) {}, // 數(shù)據(jù)更新后執(zhí)行--常用

????????????????componentUpdated(ele,binding) {}, // 父子組件都更新后執(zhí)行

? ? ? ? ????????unbind(ele,binding) {}, // 指令解綁的時(shí)候執(zhí)行

????????})

}

指令值的語(yǔ)法：

????????① v-指令名 = "指令值" ，通過(guò) 等號(hào) 可以綁定指令的值

????????② 通過(guò) binding.value 可以拿到指令的值

????????③ 通過(guò) update 鉤子 ，可以監(jiān)聽(tīng)指令值的變化，進(jìn)行dom更新操作

?

示例1---打開(kāi)頁(yè)面時(shí)，輸入框自動(dòng)獲取焦點(diǎn)（全局注冊(cè)，main.js）

// vue頁(yè)面
<input type="text" v-focus />// main.js
Vue.directive('focus', {// 獲取焦點(diǎn)inserted(ele, binding) {console.log(ele) // 綁定指令的元素console.log(binding) // 指令的相關(guān)信息（指令的值等）ele.focus() // 讓元素獲取焦點(diǎn)},
})

結(jié)果如下：?

控制臺(tái)打印的消息如下：

示例2--改變頁(yè)面字體顏色（局部注冊(cè)，在頁(yè)面中注冊(cè)）：?

// vue頁(yè)面
<h3 v-color="color">需求2：Ajax請(qǐng)求數(shù)據(jù)，并設(shè)計(jì)loading指令</h3><script>
export default {data() {return {color: 'red',}},directives: {color: {inserted(el, binding) {el.style.color = binding.value},update(el, binding) {el.style.color = binding.value},},},
}
</script>

結(jié)果如下：

修改color變量的值后，頁(yè)面字體顏色自動(dòng)更新如下