Carane nggawe direktif kustom?

Question

Accepted Answer

**Direktif kustom** ngidini sampeyan nggawe **manipulasi DOM tingkat rendah** minangka atribut `v-*` sing bisa dipigunaake maneh. Gunakna nalika sampeyan butuh akses langsung menyang elemen (focus, scroll, perpustakaan DOM pihak ketiga) — bab-bab sing komponen/props ora tulung kanthi alami. ## Nggawe direktif lokal ```vue ``` Konvensi jeneng: variabel `vFocus` dadi direktif `v-focus`. ## Hook direktif (cerminan lifecycle komponen) ```js const vDemo = { created(el, binding) {}, // before attributes/listeners applied mounted(el, binding) {}, // element inserted into the DOM updated(el, binding) {}, // after the containing component updates unmounted(el) {}, // element removed — clean up here }; ``` ## Nggunakake nilai binding lan argumen ```vue ``` Objek `binding` ngandhut `value` (ekspresi), `arg` (sawise titik loro), `modifiers` (sawise titik), lan `oldValue`. ## Conto praktis: click-outside ```js const vClickOutside = { mounted(el, binding) { el._handler = (e) => { if (!el.contains(e.target)) binding.value(); }; document.addEventListener("click", el._handler); }, unmounted(el) { document.removeEventListener("click", el._handler); // cleanup! }, }; // usage:

...

``` ## Registrasi global ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Mengapa Penting Direktif kustom minangka alat sing tepat kanggo **perilaku DOM sing bisa dipigunaake maneh lan tingkat rendah** — autofocus, click-outside, lazy-loading gambar, tooltip, nggabungake perpustakaan DOM non-Vue. Logika DOM imperatif kaya ngono dieloni lan nggawe deklaratif (`v-click-outside`) tinimbang kasebar ing hook lifecycle. Nguasai hook lan objek `binding` (value/arg/modifiers), plus pembersihan ing `unmounted`, nutupi panggunaan praktis — sanadyan kanggo logika UI paling, komponen isih pilihan sing luwih apik.