vue中自定义指令directive的详细指南

当我们需要在Vue的界面中实现自定义的行为时，可以使用指令（directive）去完成。指令是以v-开头的特殊HTML属性，它可以用于改变DOM元素的行为或者样式。

通过自定义指令，我们可以方便地实现各种控制DOM元素行为、触发事件和更新UI的需求。下面来详细讲解Vue中自定义指令的详细指南，包括指令的全局注册和局部注册、生命周期函数等。

全局注册指令

在Vue全局环境中，我们可以通过Vue.directive()方法来注册自定义指令。该方法需要两个参数：指令名称和一个对象，其中对象中包含指令相关的配置。

示例代码：

// 注册一个全局的自定义指令
Vue.directive('custom-directive', {
  bind: function (el, binding, vnode) {
    // 指令绑定到DOM时触发的函数
  },
  inserted: function (el, binding, vnode) {
    // DOM元素插入到父元素时触发的函数
  },
  update: function (el, binding, vnode) {
    // 数据更新时触发的函数
  },
  componentUpdated: function (el, binding, vnode) {
    // 组件更新时触发的函数
  },
  unbind: function (el, binding, vnode) {
    // 指令从DOM元素上解绑时触发的函数
  }
});

该例中，我们注册了一个名为custom-directive的自定义指令，并在第二个参数对象中指定了该指令的生命周期函数。这个指令定义在全局环境中，因此它可以被任何Vue组件所使用。

局部注册指令

如果我们只需要在当前组件内使用自定义指令，可以使用directives属性来注册。directives是一个包含指令的对象，其中每个属性就是一个指令。

示例代码：

var myComponent = {
  directives: {
    'custom-directive': {
      bind: function (el, binding, vnode) {
        // 指令绑定到DOM时触发的函数
      },
      inserted: function (el, binding, vnode) {
        // DOM元素插入到父元素时触发的函数
      }
    }
  }
};

该例中，我们在组件对象myComponent中注册了一个名为custom-directive的自定义指令。

生命周期函数

自定义指令的生命周期函数就是上面提到的bind、inserted、update、componentUpdated和unbind，它们会在不同的环节触发。下面分别详细介绍这些生命周期函数的作用。

bind函数

bind函数在指令绑定到DOM元素时触发，只发生一次执行。该函数接收三个参数：

• el：指令绑定的DOM元素
• binding：包含指令相关信息的对象，例如指定的表达式、指定的参数等。该对象的属性包括name、value、oldValue、expression、arg和modifiers等。
• vnode：Vue编译生成的虚拟节点

示例代码：

Vue.directive('custom-directive', {
  bind: function (el, binding, vnode) {
    console.log('directive bind');
  }
});

inserted函数

inserted函数在DOM元素被插入到父元素时触发，只发生一次执行。该函数接收三个参数：

• el：指令绑定的DOM元素
• binding：包含指令相关信息的对象
• vnode：Vue编译生成的虚拟节点

示例代码：

Vue.directive('custom-directive', {
  inserted: function (el, binding, vnode) {
    console.log('directive inserted');
  }
});

update函数

update函数在数据更新时触发，可能执行多次。该函数接收三个参数：

• el：指令绑定的DOM元素
• binding：包含指令相关信息的对象
• vnode：Vue编译生成的虚拟节点

示例代码：

Vue.directive('custom-directive', {
  update: function (el, binding, vnode) {
    console.log('directive updated');
  }
});

componentUpdated函数

componentUpdated函数在组件更新时触发，如果指令所在的组件被更新多次，则该函数也会被触发多次。该函数接收三个参数：

• el：指令绑定的DOM元素
• binding：包含指令相关信息的对象
• vnode：Vue编译生成的虚拟节点

示例代码：

Vue.directive('custom-directive', {
  componentUpdated: function (el, binding, vnode) {
    console.log('directive component updated');
  }
});

unbind函数

unbind函数在指令被解绑时触发，只会执行一次。该函数接收三个参数：

• el：指令绑定的DOM元素
• binding：包含指令相关信息的对象
• vnode：Vue编译生成的虚拟节点

示例代码：

Vue.directive('custom-directive', {
  unbind: function (el, binding, vnode) {
    console.log('directive unbind');
  }
});

示例

在下面的示例中，我们将实现一个自定义指令，使得当鼠标悬浮在元素上时，背景色变化，并且当鼠标移出时，背景色恢复。具体代码如下：

// 自定义指令
Vue.directive('bg-color', {
  bind: function (el, binding, vnode) {
    el.style.backgroundColor = binding.value;
    el.addEventListener('mouseover', function () {
      el.style.backgroundColor = binding.arg;
    });
    el.addEventListener('mouseout', function () {
      el.style.backgroundColor = binding.value;
    });
  }
});

// Vue实例
var app = new Vue({
  el: '#app',
  data: {
    color: '#ccc',
    highlightColor: '#f00'
  }
});

HTML代码如下：

<div id="app">
  <div v-bg-color:[highlightColor]="color">hover me</div>
</div>

在该例中，我们在Vue实例中注册了一个名为bg-color的自定义指令，该指令可接受一个参数。在bind函数中，我们设置了DOM元素的背景色，并对其绑定了mouseover和mouseout事件。

在HTML代码中，我们绑定了该指令，并指定了参数。当鼠标悬浮其上时，背景色将设置为highlightColor，并在鼠标移开时恢复为color。

另外一个示例是实现一个自定义指令，在输入框中按下enter键时，自动聚焦下一个输入框。具体代码如下：

// 自定义指令
Vue.directive('auto-focus', {
  bind: function (el, binding, vnode) {
    el.addEventListener('keyup', function (e) {
      if (e.keyCode === 13) {
        var nextInput = document.querySelector('[tabindex="' + (+el.tabIndex + 1) + '"]');
        if (nextInput) {
          nextInput.focus();
        }
      }
    });
  }
});

// Vue实例
var app = new Vue({
  el: '#app'
});

HTML代码如下：

<div id="app">
  <input type="text" tabindex="1" v-auto-focus>
  <input type="text" tabindex="2" v-auto-focus>
  <input type="text" tabindex="3" v-auto-focus>
  <input type="text" tabindex="4" v-auto-focus>
</div>

在该例中，我们在Vue实例中注册了一个名为auto-focus的自定义指令。这个指令在输入框中按下enter键时，会找到下一个具有tabindex属性且值比当前输入框的tabindex大1的元素，并使其聚焦。