Kako ustvarite lastno direktivo?

Question

Accepted Answer

**Lastne direktive** vam omogočijo enkapsulacijo **manipulacije DOM-a nizke ravni** kot ponovno uporabljiv atribut `v-*`. Uporabite jih, kadar potrebujete neposreden dostop do elementa (focus, scroll, knjižnice DOM tretjih oseb) — stvari, ki jih komponente/props naravno ne pokrivajo. ## Definiranje lokalne direktive ```vue ``` Konvencija poimenovanja: spremenljivka `vFocus` postane direktiva `v-focus`. ## Direkvitni kljuki (ogledalo životnega cikla 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 }; ``` ## Uporaba vezne vrednosti in argumenta ```vue ``` Objekt `binding` nosi `value` (izraz), `arg` (za dvopičjem), `modifiers` (za pikami) in `oldValue`. ## Praktičen primer: klik zunaj ```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 ``` ## Zakaj je to pomembno Lastne direktive so pravo orodje za **ponovno uporabljivo, nizko-ravnino DOM obnašanje** — avtomatski focus, klik zunaj, leno nalaganje slik, namigi, integracija knjižnic DOM izven Vue. Omogočajo, da takšna imperativna logika DOM-a ostane enkapsulirana in deklarativna (`v-click-outside`) namesto da bi bila razpršena v kljuke životnega cikla. Znanje kljukov in objekta `binding` (value/arg/modifiers), ter čiščenje v `unmounted`, pokriva njihovo praktično uporabo — čeprav je za večino logike vmesnika še vedno boljša izbira komponent.