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: {
//自定义指令的钩子函数
aa: {
//el、binding、vnode 和 oldVnode为钩子函数的参数
bind: function(el, binding, vnode, oldVnode) {
console.log("指令第一次绑定到元素", el, binding, vnode, oldVnode);
},
inserted: function() {
console.log("被绑定元素插入父节点时调用");
},
update: function() {
console.log("所在组件的虚拟节点发生改变");
},
componentUpdated: function() {
console.log("所在组件的 VNode 及其子 VNode 全部更新后调用");
},
unbind: function() {
console.log("指令与元素解绑" );
}
}
}
};
</script>
<style scoped>
</style>
