vue自定义指令怎么做？详解并给出代码和例子

Vue.js提供了自定义指令的功能，通过自定义指令可以方便地扩展Vue.js的功能。自定义指令以`v-`开头，后面跟着指令的名称，例如`v-mydirective`。

自定义指令有5个钩子函数，分别是：`bind`、`inserted`、`update`、`componentUpdated`、`unbind`。这些钩子函数可以用来在指令被绑定、插入到DOM中、更新、组件更新或解绑时执行相应的操作。

下面是一个自定义指令的例子：

<template>
  <div>
    <input type="text" v-mydirective />
  </div>
</template>

<script>
  export default {
    directives: {
      mydirective: {
        bind: function(el, binding, vnode) {
          // 绑定时执行的操作
          el.style.backgroundColor = 'yellow';
        },
        inserted: function(el, binding, vnode) {
          // 插入到DOM时执行的操作
          el.focus();
        },
        update: function(el, binding, vnode, oldVnode) {
          // 更新时执行的操作
          console.log('update');
        },
        componentUpdated: function(el, binding, vnode, oldVnode) {
          // 组件更新时执行的操作
          console.log('componentUpdated');
        },
        unbind: function(el, binding, vnode) {
          // 解绑时执行的操作
          console.log('unbind');
        }
      }
    }
  };
</script>

在上面的例子中，我们定义了一个名为`mydirective`的自定义指令，并通过`directives`选项将其注册到组件中。在`bind`函数中，我们为输入框设置了黄色背景色；在`inserted`函数中，我们将输入框聚焦；在`update`函数、`componentUpdated`函数和`unbind`函数中，我们分别打印了更新、组件更新和解绑的信息。

在模板中，我们通过`v-mydirective`将自定义指令绑定到了输入框上。当输入框插入到DOM中时，自定义指令的`inserted`函数将被调用，输入框将被聚焦。当输入框的值发生变化时，自定义指令的`update`函数和`componentUpdated`函数将被调用。当组件被销毁时，自定义指令的`unbind`函数将被调用。

以上是一个简单的自定义指令的例子，可以根据实际需求进行修改和扩展。