Directivas personalizadas
Registre directivas globales y locales con hooks del ciclo de vida como mounted y updated para encapsular la lógica de manipulación del DOM fuera de los componentes.
Directivas personalizadas es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué son las directivas?
Las directivas son lógica reutilizable de manipulación del DOM que se adjunta a los elementos mediante el prefijo v-. Ejemplos integrados: v-if, v-for, v-model y v-show. Las directivas personalizadas permiten crear las suyas propias.
Caso de uso: enfoque automático
Una directiva puede encapsular pequeñas operaciones de manipulación del DOM que no justifican un componente envoltorio.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Registro local de directivas
En <script setup>, declare las directivas con el prefijo v; Vue las registra automáticamente de forma local.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Registro global de directivas
Use app.directive(name, definition) para que una directiva esté disponible en todas partes.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Hooks del ciclo de vida de las directivas
Las directivas tienen hooks que reflejan el ciclo de vida de los componentes: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount y unmounted.
const vColor = {
beforeMount(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
};El objeto binding
Los hooks reciben un objeto binding: value, oldValue, arg, modifiers e instance.
<p v-pin:bottom.left="200">Pinned</p>
// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }Ejemplo real: v-click-outside
Una directiva habitual: llama a un controlador cuando el usuario hace clic fuera del elemento.
const vClickOutside = {
mounted(el, binding) {
el._handler = (e) => {
if (!el.contains(e.target)) binding.value(e);
};
document.addEventListener('click', el._handler);
},
unmounted(el) {
document.removeEventListener('click', el._handler);
}
};
// Usage:
<div v-click-outside="closeMenu">...</div>Ejemplo real: v-tooltip
Adjunte un tooltip de Tippy/Popper mediante una directiva para mantener limpias las plantillas.
import tippy from 'tippy.js';
const vTooltip = {
mounted(el, binding) {
el._tippy = tippy(el, { content: binding.value });
},
updated(el, binding) {
el._tippy?.setContent(binding.value);
},
unmounted(el) {
el._tippy?.destroy();
}
};v-debounce: aplicar debounce a eventos de entrada
Implemente un debounce alrededor del controlador @input de un campo de entrada mediante una directiva personalizada.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">Directiva frente a componente y composable
Composables: lógica con estado (datos y refs). Componentes: estructura de UI reutilizable con su propia plantilla. Directivas: comportamiento puro del DOM sobre un elemento existente. Elija una directiva cuando no se necesite ninguna plantilla ni marcado.
Consideraciones de rendimiento
Las directivas se ejecutan en cada actualización. Manténgalas ligeras. Para operaciones costosas, condicione la ejecución a binding.value !== binding.oldValue para omitir trabajo innecesario.
Comprobación rápida
¿Cuál es la diferencia entre usar una directiva de Vue y un componente de Vue para añadir comportamiento?
Resumen: directivas personalizadas
Lógica reutilizable del DOM con prefijo v. Regístrela localmente (const vName en script setup) o globalmente (app.directive). Hooks del ciclo de vida: mounted, updated y unmounted. binding proporciona value, oldValue, arg y modifiers. Úsela para comportamiento puro del DOM (enfoque, clic fuera, tooltip y debounce). Use componentes para el marcado, composables para la lógica con estado y directivas para ampliar el DOM.
Preguntas frecuentes
¿La lección «Directivas personalizadas» es gratis?
Sí — el texto completo de «Directivas personalizadas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Directivas personalizadas»?
Registre directivas globales y locales con hooks del ciclo de vida como mounted y updated para encapsular la lógica de manipulación del DOM fuera de los componentes. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Directivas personalizadas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- provide() e inject() para la inyección de dependencias
- Componentes asíncronos y Suspense
- Directivas personalizadas
- Sistema de plugins: app.use()