Hoe maak je een aangepaste directive?

Question

Accepted Answer

**Aangepaste directives** laten je **laag-niveau DOM-manipulatie** als herbruikbaar `v-*`-attribuut inkapselen. Gebruik ze als je directe toegang tot een element nodig hebt (focus, scrollen, third-party DOM-bibliotheken) — dingen die componenten/props niet natuurlijk dekken. ## Waarom het belangrijk is ```vue ``` De naamgevingsconventie: een variabele `vFocus` wordt de directive `v-focus`. ## Directive hooks (reflecteren componentenlevenscyclus) ```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 }; ``` ## De bindingswaarde en argument gebruiken ```vue ``` Het `binding`-object bevat `value` (de uitdrukking), `arg` (na de dubbele punt), `modifiers` (na punten), en `oldValue`. ## Een praktisch voorbeeld: 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:

...

``` ## Globale registratie ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Waarom het belangrijk is Aangepaste directives zijn het juiste hulpmiddel voor **herbruikbaar, laag-niveau DOM-gedrag** — autofocus, click-outside, lazy-loading afbeeldingen, tooltips, integreren van niet-Vue DOM-bibliotheken. Ze houden zulke imperatieve DOM-logica ingekapseld en declaratief (`v-click-outside`) in plaats van verspreid in levenscyclusmethoden. Het kennen van de hooks en het `binding`-object (waarde/arg/modifiers), plus opruimen in `unmounted`, dekt hun praktische gebruik — hoewel voor de meeste UI-logica componenten nog steeds de betere keuze zijn.