vue自定义指令directive

关于vue自定义指令directive官方文档的解释如下：
自定义指令
Vue-directive的用法
相信官网对于自定义指令的介绍已经很详细了，下面我们主要对自定义指令的生命周期函数进行一下解释(以官网示例为例,备注为生命周期函数触发条件)

Vue.directive('my-directive', {
  bind: function () {},//刚绑定指令触发，这里只调用一次
  inserted: function () {},//元素插入父节点时候触发
  update: function () {},//元素更新时触发，这里可调用多次
  componentUpdated: function () {},//元素更新完成后触发
  unbind: function () {}//指令解除绑定时触发，只调用一次
})

注意：

Vue.directive('my-directive',function data(){
const div = document.createElement('div')
document.body.append(div)
})//如果直接传入一个函数，那么这个函数会直接赋值给bind和update

在项目实际应用中我们可以将自定义组件封装成插件，这样在项目中调用非常方便。