Vue自定义指令复习

Vue 的自定义指令 其实就是一个对象

内部包含钩子函数

mounted

updated

unmounted

每个函数包含三个参数 

　　el　　　　指令绑定的元素

　　binding　  指令信息对象

　　vnode　　虚拟节点信息

例子：

// v-color 为元素添加颜色
export const color = {
  mounted(el, binding, vnode) {
　　// 也有写法 el, { value }
    el.style.color = binding.value;
  },
  // 组件更新时调用
  updated(el, binding, vnode) {
    el.style.color = binding.value;
  },
  // 组件销毁时调用
  unmounted(el, binding, vnode) {
    el.style.color = "";
  },
};

这样一个自定义指令就写好了，后面需要使用

<指令名，指令对象>

app.directive('color', color)

或者 批量注册

install(Vue) {

    Object.keys(directives).forEach((key) => {

      Vue.directive(key, directives[key]);

    });

 },