คำสั่งกำหนดเอง

Directive คืออะไร

กรณีใช้งาน: โฟกัสอัตโนมัติ

<template>
  <input v-focus>
</template>

<script setup>
const vFocus = {
  mounted: (el) => el.focus()
};
</script>

การลงทะเบียน Directive เฉพาะที่

<script setup>
const vColor = {
  mounted: (el, binding) => {
    el.style.color = binding.value;
  }
};
</script>

<template>
  <p v-color="'red'">Hello</p>
</template>

การลงทะเบียน Directive ส่วนกลาง

// main.ts
const app = createApp(App);

app.directive('focus', {
  mounted: (el) => el.focus()
});

app.mount('#app');

ฮุกวงจรชีวิตของ Directive

const vColor = {
  beforeMount(el, binding) {
    el.style.color = binding.value;
  },
  updated(el, binding) {
    el.style.color = binding.value;
  }
};

อ็อบเจ็กต์ binding

<p v-pin:bottom.left="200">Pinned</p>

// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }

ตัวอย่างจริง: v-click-outside

const vClickOutside = {
  mounted(el, binding) {
    el._handler = (e) => {
      if (!el.contains(e.target)) binding.value(e);
    };
    document.addEventListener('click', el._handler);
  },
  unmounted(el) {
    document.removeEventListener('click', el._handler);
  }
};

// Usage:
<div v-click-outside="closeMenu">...</div>

ตัวอย่างจริง: v-tooltip

import tippy from 'tippy.js';

const vTooltip = {
  mounted(el, binding) {
    el._tippy = tippy(el, { content: binding.value });
  },
  updated(el, binding) {
    el._tippy?.setContent(binding.value);
  },
  unmounted(el) {
    el._tippy?.destroy();
  }
};

v-debounce: จำกัดความถี่ของเหตุการณ์อินพุต

const vDebounce = {
  mounted(el, binding) {
    let timer;
    el.addEventListener('input', () => {
      clearTimeout(timer);
      timer = setTimeout(() => binding.value(el.value), 300);
    });
  }
};

<input v-debounce="search">

Directive เทียบกับ Component และ Composable

ข้อควรพิจารณาด้านประสิทธิภาพ

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน: Directive แบบกำหนดเอง