Kako kreirate prilagođenu direktivu?

Question

Accepted Answer

**Prilagođene direktive** vam omogućavaju da enkapsuliramo **manipulaciju DOM-om niskog nivoa** kao ponovno upotrebljiv `v-*` atribut. Koristite ih kada vam je potreban izravan pristup elementu (focus, scroll, DOM biblioteke treće strane) — stvari koje komponente/props prirodno ne pokrivaju. ## Definiranje lokalne direktive ```vue ``` Konvencija imenovanja: varijabla `vFocus` postaje direktiva `v-focus`. ## Hooks direktive (ogledalo životnog ciklusa komponente) ```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 }; ``` ## Korištenje vrijednosti vezanja i argumenta ```vue ``` Objekt `binding` sadrži `value` (izraz), `arg` (nakon dvotačke), `modifiers` (nakon točaka) i `oldValue`. ## Praktičan primjer: 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:

...

``` ## Globalna registracija ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Zašto je to važno Prilagođene direktive su pravi alat za **ponovno upotrebljivu, nisko-nivosku DOM ponašanju** — autofocus, click-outside, lazy-loading slika, tooltipove, integraciju DOM biblioteka koje nisu Vue. Oni održavaju takvu imperativnu DOM logiku enkapsuliranu i deklarativnu (`v-click-outside`) umjesto raspršene kroz lifecycle hooks. Znanje o hooks-ima i `binding` objektu (value/arg/modifiers), plus čišćenje u `unmounted`, pokriva njihovu praktičnu upotrebu — iako je za većinu UI logike, komponente i dalje bolji izbor.