vue3 directives

// Vue 3 Directives 示例代码

<template>
  <div>
    <p v-focus>这段文本会自动聚焦。</p>
    <input v-model="message" v-custom-directive />
  </div>
</template>

<script>
import { defineComponent, directive } from 'vue';

export default defineComponent({
  data() {
    return {
      message: ''
    };
  },
  directives: {
    focus: {
      mounted(el) {
        // 当元素挂载时，自动聚焦
        el.focus();
      }
    },
    customDirective: {
      mounted(el, binding, vnode, prevVnode) {
        // 自定义指令的逻辑
        console.log('Custom Directive Applied', binding.value);
        el.style.backgroundColor = 'yellow';
      }
    }
  }
});
</script>

<style scoped>
/* 样式可以根据需要添加 */
</style>

解释说明

1. v-focus 指令:

   • focus 是一个自定义指令，它在元素挂载时调用 el.focus() 方法，使元素自动获得焦点。
   • 这个指令非常简单，只包含一个 mounted 钩子函数。

2. v-custom-directive 指令:

   • customDirective 是另一个自定义指令，它在元素挂载时改变元素的背景颜色为黄色，并在控制台输出一些信息。
   • 它也只包含一个 mounted 钩子函数，但你可以根据需要添加更多的钩子函数（如 updated、beforeUnmount 等）。

3. 数据绑定:

   • 使用 v-model 绑定输入框的值到组件的 data 中的 message 属性。

4. 注册指令:

   • 在组件的 directives 选项中注册自定义指令，以便在模板中使用。

希望这个示例能帮助你理解 Vue 3 的自定义指令。