Belajar Vue - Directives & Custom Directives

#Pendahuluan

Direktif adalah inti dari "keajaiban" template Vue — atribut khusus berawalan v- yang memberitahu Vue apa yang harus dilakukan pada elemen. Di episode 4 kalian sudah berkenalan dengan v-bind, v-if, v-for, dan v-on. Episode 7 melengkapinya dengan direktif yang paling sering dipakai sehari-hari dan paling sering disalahpahami.

Kita fokus pada v-model untuk two-way binding, v-show, v-cloak, dan v-pre, lalu menutup dengan custom directives. Memahami direktif bawaan mencegah kalian menulis ulang hal yang sudah disediakan Vue, sementara custom directives membuka jalan untuk solusi DOM yang spesifik.

#v-model: Two-Way Binding

#Binding Dua Arah

v-model menghubungkan state dengan input sehingga keduanya saling sinkron:

v-model pada input

<script setup>
import { ref } from "vue";
const nama = ref("");
</script>
 
<template>
  <input v-model="nama" placeholder="Nama" />
  <p>Halo, {{ nama }}</p>
</template>

Saat kalian mengetik, nama diperbarui; saat nama diubah lewat kode, input ikut terisi. v-model="nama" adalah gula sintaks dari :value ditambah @input — dua arah dalam satu direktif.

#Modifier v-model

Modifier menyesuaikan perilaku pengikatan:

Modifier v-model

<script setup>
import { ref } from "vue";
const angka = ref(0);
const teks = ref("");
</script>
 
<template>
  <input v-model.number="angka" type="number" />
  <input v-model.trim="teks" />
  <input v-model.lazy="teks" />
</template>

• v-model.number mengonversi input menjadi angka.
• v-model.trim menghapus spasi di awal dan akhir.
• v-model.lazy mensinkronkan saat event change, bukan setiap ketikan.

#v-model pada Komponen

Komponen juga bisa memakai v-model lewat kontrak modelValue dan event update:modelValue:

v-model pada komponen

<script setup>
const props = defineProps({ modelValue: String });
const emit = defineEmits(["update:modelValue"]);
</script>
 
<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

Parent memakainya seperti input biasa: v-model="nama". Dengan cara ini komponen form apa pun bisa mendukung two-way binding.

#v-show, v-cloak, dan v-pre

#v-show: Toggle Tanpa Hapus

v-show mengatur visibilitas lewat CSS display tanpa menghapus elemen dari DOM:

v-show

<script setup>
import { ref } from "vue";
const tampil = ref(true);
</script>
 
<template>
  <div v-show="tampil">Konten yang bisa disembunyikan</div>
  <button @click="tampil = !tampil">Toggle</button>
</template>

v-show="tampil" hanya mengubah style display. Berbeda dengan v-if, elemen tetap dirender sehingga state internalnya tidak hilang — cocok untuk toggling yang sering.

#v-cloak dan v-pre

v-cloak menyembunyikan template yang belum di-compile agar teks mentah tidak berkedip; v-pre melewatkan kompilasi untuk menampilkan sintaks {{ }} apa adanya.

#Membuat Custom Directives

#Struktur Dasar Custom Directive

Ketika kebutuhan DOM tidak tersedia di direktif bawaan, kalian bisa membuat direktif sendiri. Contoh: fokus otomatis saat elemen di-mount:

Custom directive vFocus

const vFocus = {
  mounted(el) {
    el.focus();
  },
};

Daftarkan secara lokal di komponen atau global lewat app.directive:

Memakai custom directive

<script setup>
import { vFocus } from "../directives/focus";
</script>
 
<template>
  <input v-focus placeholder="Fokus otomatis" />
</template>

v-focus pada input memicu mounted(el) yang memanggil el.focus() — elemen langsung mendapat fokus saat dirender. Dengan <script setup>, direktif yang diimpor dengan nama vFokus otomatis tersedia sebagai v-fokus.

#Lifecycle Hooks Direktif

Custom directives mendukung lifecycle hooks layaknya komponen:

Lifecycle hooks direktif

const vDemo = {
  mounted(el, binding) {
    console.log("dimount", binding.value);
  },
  updated(el, binding) {
    console.log("diperbarui", binding.value);
  },
  unmounted(el) {
    console.log("dilepas");
  },
};

binding.value membawa nilai yang dioper saat direktif dipakai, seperti v-demo="nilai". Hook updated berjalan setiap elemen diperbarui, dan unmounted saat elemen dihapus dari DOM.

#Kasus Penggunaan Praktis

#Contoh: Highlight Teks

Custom directive sering dipakai untuk integrasi DOM, misalnya menyorot elemen berdasarkan nilai:

Directive vHighlight

const vHighlight = {
  mounted(el, binding) {
    if (binding.value) {
      el.style.backgroundColor = binding.value;
    }
  },
};

v-highlight="'yellow'" menetapkan warna latar saat elemen dirender. Pattern ini berguna untuk menyorot kata kunci pencarian, error field, atau status data.

#Penutup

Episode 7 melengkapi katalog direktif kalian: v-model untuk two-way binding dengan modifier seperti .number, .trim, dan .lazy, v-show untuk toggling CSS, v-cloak dan v-pre untuk kasus khusus, serta custom directives dengan lifecycle hooks untuk kebutuhan DOM yang spesifik.

Inti yang harus dibawa pulang:

• v-model adalah gula sintaks untuk two-way binding.
• Modifier .number, .trim, dan .lazy menyesuaikan perilaku binding.
• v-show mengubah display; elemen tetap di DOM.
• v-cloak mencegah kedipan template; v-pre melewatkan kompilasi.
• Custom directive diimpor sebagai vNama di <script setup>.
• Lifecycle directive: mounted, updated, unmounted.

Di episode 8 selanjutnya kita masuk ke data fetching dan asynchronous UI — mengambil data dengan fetch dan Axios, mengelola loading state dan error handling, pattern fetching berbasis Composition API, serta integrasi Vue Query (TanStack Query) untuk caching yang cerdas.