¿Cómo creas una directiva personalizada?

Question

Accepted Answer

**Custom directives** te permiten encapsular **manipulación de DOM de bajo nivel** como un atributo `v-*` reutilizable. Úsalas cuando necesites acceso directo a un elemento (enfoque, desplazamiento, bibliotecas DOM de terceros) — cosas que components/props no cubren naturalmente. ## Definiendo una directiva local ```vue ``` Convención de nombres: una variable `vFocus` se convierte en la directiva `v-focus`. ## Directive hooks (espeja el ciclo de vida del componente) ```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 }; ``` ## Usando el valor binding y el argumento ```vue ``` El objeto `binding` lleva `value` (la expresión), `arg` (después de los dos puntos), `modifiers` (después de los puntos) y `oldValue`. ## Un ejemplo práctico: 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:

...

``` ## Registro global ```js app.directive("focus", { mounted: (el) => el.focus() }); // available everywhere ``` ## Por qué es importante Custom directives son la herramienta correcta para **comportamiento de DOM reutilizable de bajo nivel** — autofocus, click-outside, lazy-loading de imágenes, tooltips, integración de bibliotecas DOM no Vue. Mantienen tal lógica imperativa de DOM encapsulada y declarativa (`v-click-outside`) en lugar de esparcida en lifecycle hooks. Conocer los hooks y el objeto `binding` (value/arg/modifiers), más la limpieza en `unmounted`, cubre su uso práctico — aunque para la mayoría de la lógica de UI, components sigue siendo la mejor opción.