Come si crea una direttiva personalizzata?

Question

Accepted Answer

**Le direttive personalizzate** ti permettono di incapsulare la **manipolazione DOM di basso livello** come attributo `v-*` riutilizzabile. Usale quando hai bisogno di accesso diretto a un elemento (focus, scroll, librerie DOM di terze parti) — cose che componenti/props non ricoprono naturalmente. ## Definire una direttiva locale ```vue ``` La convenzione di naming: una variabile `vFocus` diventa la direttiva `v-focus`. ## Hook delle direttive (specchio del lifecycle dei componenti) ```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 }; ``` ## Utilizzare il valore del binding e l'argomento ```vue ``` L'oggetto `binding` contiene `value` (l'espressione), `arg` (dopo i due punti), `modifiers` (dopo i punti), e `oldValue`. ## Un esempio pratico: 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:

...

``` ## Registrazione globale ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Perché è importante Le direttive personalizzate sono lo strumento giusto per il **comportamento DOM riutilizzabile e di basso livello** — autofocus, click-outside, lazy-loading delle immagini, tooltip, integrazione di librerie DOM non-Vue. Mantengono tale logica DOM imperativa incapsulata e dichiarativa (`v-click-outside`) anziché dispersa negli hook del lifecycle. Conoscere gli hook e l'oggetto `binding` (value/arg/modifiers), più la pulizia in `unmounted`, copre il loro uso pratico — anche se per la maggior parte della logica UI, i componenti sono ancora la scelta migliore.