Creación de directivas personalizadas
app.directive(), hooks mounted/updated/unmounted, argumentos y modificadores de directivas.
Creación de directivas personalizadas es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 4 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Cuando los componentes no son suficientes
La mayor parte de la reutilización en Vue se realiza mediante componentes y composables. Sin embargo, parte de la lógica necesita dirigirse al DOM sin procesar: enfocar automáticamente un input, integrar una biblioteca que no sea de Vue o medir un elemento. Las directivas personalizadas están pensadas exactamente para eso.
Una directiva mínima
Registre una directiva en la aplicación con app.directive. El hook mounted recibe el elemento, por lo que esta directiva enfoca un input cuando aparece.
const app = createApp(App)
app.directive('focus', {
mounted(el) { el.focus() }
})Uso de la directiva
Aplíquela en una plantilla con el prefijo v- seguido del nombre registrado.
<template>
<input v-focus />
</template>Directivas locales en script setup
Dentro de <script setup>, cualquier variable de nivel superior que empiece por v y use camelCase se convierte en una directiva utilizable. Llámela vFocus y úsela como v-focus.
<script setup>
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>El objeto de vinculación
Cada hook recibe un objeto binding como segundo argumento. Este contiene el valor, el argumento y los modificadores de la directiva indicados en la plantilla.
app.directive('demo', {
mounted(el, binding) {
console.log(binding.value, binding.arg, binding.modifiers)
}
})Pasar un valor
La expresión que aparece después del signo igual se convierte en binding.value. En este caso se pasa un color y se aplica al elemento.
<!-- template -->
<p v-color="'red'">Hello</p>
<!-- directive -->
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value }
})Pasar un argumento
La parte que aparece después de los dos puntos se convierte en binding.arg. Esto permite que una directiva se comporte de forma diferente según una etiqueta.
<!-- v-pin:top means binding.arg === 'top' -->
<div v-pin:top="20"></div>Uso de modificadores
Los modificadores aparecen después de los puntos y llegan en binding.modifiers como un mapa de valores booleanos. Úselos para ajustar el comportamiento.
<!-- v-pin.fixed -> binding.modifiers.fixed === true -->
<div v-pin.fixed="10"></div>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.
Reaccionar a las actualizaciones
El hook updated se ejecuta después de que el elemento se vuelve a renderizar. Compare binding.value con binding.oldValue para actuar solo ante cambios reales y limpie los recursos en unmounted.
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value },
updated(el, binding) {
if (binding.value !== binding.oldValue) el.style.color = binding.value
}
})Directivas frente a componentes
Prefiera los componentes para todo lo que implique estructura o estado. Recurra a las directivas solo cuando necesite acceso directo y de bajo nivel al DOM que no encaje en un componente, como la gestión del foco o los widgets de DOM de terceros.
Comprobación rápida
Compruebe sus conocimientos sobre las directivas personalizadas.
Repaso
Ha aprendido a crear directivas personalizadas:
- Regístrelas globalmente con
app.directiveo localmente comovNameen script setup. binding.value,binding.argybinding.modifierspermiten pasar datos.- Hooks del ciclo de vida: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted.
- Use directivas para tareas de bajo nivel en el DOM; en los demás casos, prefiera los componentes.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 42
- Lecciones
- 156
Preguntas frecuentes
¿La lección «Creación de directivas personalizadas» es gratis?
Sí — el texto completo de «Creación 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Creación de directivas personalizadas»?
app.directive(), hooks mounted/updated/unmounted, argumentos y modificadores de directivas. Practicas Vue 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 Vue Academy?
No se requiere experiencia previa. Vue 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 4 de 4.
¿Cuánto tiempo toma la lección «Creación de 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 Vue Academy?
Sí. Cada lección de Vue 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
- v-model: aspectos internos del binding bidireccional
- Modificadores de eventos de v-on
- Bindings dinámicos y múltiples con v-bind
- Creación de directivas personalizadas