Vue自定义指令

vue官方有提供给我们自定义像v-model 和 v-show这样的指令，来看看怎么定义

话不多说我们事先用vue官方脚手架创建一个项目

比如我们要定义一个鼠标移入就把当前dom原生透明度显示为0，鼠标移开的时候为1，达到鼠标移入显示，鼠标移开隐藏的效果

function on(element, event, handler) {
  if (element && event && handler) {
    element.addEventListener(event, handler, false);
  }
}
function off(element, event, handler) {
  if (element && event) {
    element.removeEventListener(event, handler, false);
  }
}

// v-visibility自定义指令，默认导出
export default {
  // 初始化设置,只调用一次，指令第一次绑定到元素时调用
  bind(el, binding, vnode) {
    console.log("bind:", el, binding, vnode);
    el.style.opacity = 0;
  },
  // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
  inserted(el, binding, vnode) {
    console.log("inserted:", el, binding, vnode);
    on(el, "mouseover", () =