vue允許自定義指令喻犁，便于對dom元素進行底層操作，就類似于v-if這樣的指令
定義方法
1.注冊全局自定義指令(使用的是官方文檔上的示例)
// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
// 當被綁定的元素插入到 DOM 中時……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
2.注冊局部自定義指令（在）
<template>
<div>
<swiper></swiper>
<p v-aa @click="bbb">
<input type="text" />
<input type="text" name id v-aa />
</p>
<p v-if="cc">[pppppp</p>
</div>
</template>
<script>
import swiper from "./component/swiper";
export default {
data() {
return {
cc: true
};
},
components: {
swiper
},
mounted() {},
methods: {
bbb() {
this.cc = !this.cc;
}
},
directives: {
//自定義指令的鉤子函數(shù)
aa: {
//el跳昼、binding、vnode 和 oldVnode為鉤子函數(shù)的參數(shù)
bind: function(el, binding, vnode, oldVnode) {
console.log("指令第一次綁定到元素", el, binding, vnode, oldVnode);
},
inserted: function() {
console.log("被綁定元素插入父節(jié)點時調(diào)用");
},
update: function() {
console.log("所在組件的虛擬節(jié)點發(fā)生改變");
},
componentUpdated: function() {
console.log("所在組件的 VNode 及其子 VNode 全部更新后調(diào)用");
},
unbind: function() {
console.log("指令與元素解綁" );
}
}
}
};
</script>
<style scoped>
</style>
