在Vue中自定义指令

1.自定义全局指令

 // 自定义指令: v-focus，
 //功能: 为绑定的元素自动获取焦点：
    Vue.directive('focus', {
//使用inserted钩子函数:被绑定的元素插入父节点时调用
      inserted: function (el) {
        el.focus();
      }
    });

1.自定义局部指令

 // 自定义指令: v-color，
 //功能: 为绑定的元素设置指定的字体颜色：
      directives: {

        color: { // 指令命名

          bind(el, xingcan) {//调用bind函数:第一次绑定到元素时调用
        //在el后面的形参可以接收到传过来的值.
        
            el.style.color = xingcan.value;
         //把传过来的值赋给el
          }
        }
      }

使用自定义指令

//使用 v-focus 自动获取焦点
//使用 v-color 把字体设置为 pink
<input type="text" v-focus v-color="'pink'">

有下面这些钩子函数可以选择:

钩子函数	触发时机/条件/作用
bind	只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted	被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update	所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
unbind	只调用一次，指令与元素解绑时调用
componentUpdated	指令所在组件的 VNode 及其子 VNode 全部更新后调用。

使用钩子函数时可以传入不同的参数

el参数就是指令所绑定的元素，可以用来直接操作 DOM.

如果你定义的指令在使用时需要传入不同的值,你可以直接写到钩子函数的形参中 在函数体内使用即可
例如:

bind(el, xingcan) {

            el.style.color = xingcan.value;

          }