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>