vue自定义指令

directives

钩子函数

• bind 绑定到元素时调用 一次
• inserted 被绑定元素插入父节点时调用
• update
• componentUpdated 组件的 VNode 及其子 VNode 全部更新后调用
• unbind 与元素解绑时调用 一次

钩子参数

• el 绑定的元素
• binding 对象
• vnode 虚拟节点
• oldVnode 上一个虚拟节点

绑定dom上，点击进行系列操作

directives: {
    color: {
      bind(el) {
        el.onclick = () => {
          el.style.color = "blue";
        };
      },
    },
  }

Tab菜单样式的改变

// 可以传入js对象
// curIdx 当前的index 
<div class="nav" v-nav="{`curIdx, className: 'nav-item', activeClass:'nav-current`}">
    <li v-for="(item, index) in list" :key="index">{{item}}</li>
</div>

directives:{
    nav: {
        bing (el, binding, vnode) {
            const ops = binding.value,
                  dom = el.getElementsByClassName(ops.className)；
            dom[ops.curIdx].className += ` ${ops.activeClass} `;
        },
        update (el, binding, vnode) {
            const ops = binding.value,
                  oldOps = binding.oldValue,
                  dom = el.getElementsByClassName(ops.className);
            dom[oldOps.curIdx].className = ` ${oldOps.className} `；
            dom[ops.curIdx].className += ` ${ops.activeClass} `;
        }
    }
}