Kuinka luot mukautetun direktiivin?

Question

Accepted Answer

**Custom directives** mahdollistavat **matalan tason DOM-manipuloinnin** kapseloinnin uudelleenkäytettävänä `v-*` attribuuttina. Käytä niitä, kun tarvitset suoraa pääsyä elementtiin (fokus, vieritys, kolmannen osapuolen DOM-kirjastot) — asiat, joita komponentit/propsit eivät luonnollisesti kata. ## Paikallisen direktiivin määrittäminen ```vue ``` Nimeämiskäytäntö: muuttuja `vFocus` tulee direktiiviksi `v-focus`. ## Directive hooks (heijastaa komponentin elinkaaren) ```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 }; ``` ## Binding-arvon ja argumentin käyttäminen ```vue ``` `binding`-objekti sisältää `value` (lauseke), `arg` (kaksoispisteen jälkeen), `modifiers` (pisteiden jälkeen) ja `oldValue`. ## Käytännöllinen esimerkki: 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:

...

``` ## Globaali rekisteröinti ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Miksi se on tärkeää Custom directives ovat oikea työkalu **uudelleenkäytettävälle, matalan tason DOM-käyttäytymiselle** — autofocus, click-outside, kuvien lazy-loading, tooltips, ei-Vue DOM-kirjastojen integrointi. Ne pitävät tällaisen imperatiiivisen DOM-logiikan kapseloituna ja deklaratiivisena (`v-click-outside`) sen sijaan, että se olisi hajallaan lifecycle hookeissa. Hookien ja `binding`-objektin (value/arg/modifiers) tunteminen sekä siivous `unmounted`-kohdassa kattaa niiden käytännön käytön — vaikka suurimmalle osalle käyttöliittymän logiikasta komponentit ovat silti parempi valinta.