Vue.js 自定义指令

在 Vue.js 中，除了内置的指令（如 v-if, v-for 等）外，我们还可以自定义指令来扩展 Vue 的功能。自定义指令是一个带有 bind, inserted, update, componentUpdated, unbind 函数的对象，这些函数分别在指令绑定到元素、插入到 DOM、更新元素、组件更新完成、解绑元素时被调用。

自定义全局指令

要在 Vue 中注册一个全局自定义指令，可以使用 Vue.directive 方法。下面是一个简单的例子，实现一个自定义指令 v-highlight，它可以将元素的背景色设置为黄色：

// www.javascriptcn.com code example
<template>
  <div v-highlight>Highlight me!</div>
</template>

<script>
export default {
  directives: {
    highlight: {
      bind(el, binding, vnode) {
        el.style.backgroundColor = 'yellow';
      }
    }
  }
}
</script>

自定义局部指令

如果我们只想在某个组件中使用自定义指令，可以在组件的 directives 选项中注册指令。下面是一个例子：

// www.javascriptcn.com code example
<template>
  <div v-local-highlight>Highlight me locally!</div>
</template>

<script>
export default {
  directives: {
    'local-highlight': {
      bind(el, binding, vnode) {
        el.style.backgroundColor = 'yellow';
      }
    }
  }
}
</script>

带参数的自定义指令

有时我们需要在自定义指令中传递参数，可以在指令绑定时使用 v-highlight:color="'red'" 这样的语法。下面是一个带参数的自定义指令例子：

// www.javascriptcn.com code example
<template>
  <div v-highlight:color="'red'">Highlight me with red color!</div>
</template>

<script>
export default {
  directives: {
    highlight: {
      bind(el, binding, vnode) {
        el.style.backgroundColor = binding.value;
      }
    }
  }
}
</script>

钩子函数

自定义指令可以使用的钩子函数有以下几个：

• bind: 只调用一次，指令第一次绑定到元素时调用。
• inserted: 被绑定元素插入父节点时调用。
• update: 被绑定元素所在的模板更新时调用，但是可能发生在其子元素更新之前。
• componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
• unbind: 只调用一次，指令与元素解绑时调用。

以上是关于 Vue.js 自定义指令的一些基本内容，希望对你有所帮助。