En Vue.js, una directiva es un atributo especial que se añade a un elemento HTML para aplicar un comportamiento específico.
Es decir, son atributos que vamos a usar en nuestro HTML, pero que no son estándar de HTML. En su lugar, Vue.js usará estos atributos para hacer “su magia”.
Son una forma de extender el comportamiento de los elementos HTML y nos permiten manipular el DOM de manera declarativa.
Directivas incorporadas en Vue.js
Vue.js incluye varias directivas incorporadas que cubren la mayoría de las necesidades comunes en el desarrollo de aplicaciones.
Estas directivas siempre comienzan con el prefijo v-, seguido del nombre de la directiva. Son las que usaremos la mayoría del tiempo.
Veremos que dos de ellas, v-bind y v-on, se usan tan frecuentemente que hasta tienen hasta un alias más corto.
Vamos a verlas, ordenadas por categorías 👇.
Enlace de datos
Las directivas de enlace de datos permiten vincular datos y variables de Vue con atributos HTML o propiedades de componentes.
| Nombre | Descripción |
|---|---|
v-bind | Enlaza dinámicamente atributos HTML o propiedades de componentes. |
v-model | Crea un enlace bidireccional entre un input y una propiedad de datos. |
v-text | Actualiza el textContent de un elemento con el valor proporcionado. |
v-html | Actualiza el innerHTML de un elemento (¡cuidado con XSS!). |
<!-- Pone como atributo src el contenido de la variable imageUrl -->
<img :src="imageUrl" alt="Imagen">
<!-- Actualiza el `textContent` de un elemento -->
<p v-text="message"></p>
<!-- Actualiza el `innerHTML` de un elemento (¡cuidado con XSS!) -->
<p v-html="htmlContent"></p>
El uso de : es una abreviatura de v-bind. Por ejemplo, :src es equivalente a v-bind:src.
Renderizado condicional
Las directivas de renderizado condicional permiten mostrar u ocultar elementos en función de una condición. (por ejemplo, para crear interfaces dinámicas que reaccionan al estado de la aplicación).
| Nombre | Descripción |
|---|---|
v-if | Renderiza condicionalmente un bloque de HTML si la expresión es verdadera. |
v-else-if | Renderiza condicionalmente un bloque de HTML si la expresión anterior es falsa. |
v-else | Renderiza un bloque de HTML si todas las condiciones anteriores son falsas. |
v-show | Muestra u oculta un elemento basado en una condición (usando display: none). |
<p v-if="showMessage">¡Hola!</p>
<p v-else>No hay mensaje.</p>Renderizado iterativo
Las directivas de iteración permiten mostrar colecciones de datos de manera dinámica (por ejemplo, mostrar datos de un array).
| Nombre | Descripción |
|---|---|
v-for | Itera sobre una lista y renderiza un bloque de HTML para cada elemento. |
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>Manejo de eventos
Las directivas de manejo de eventos permiten escuchar eventos del DOM (como clics, entradas de teclado o cambios en un campo de texto), y ejecutar métodos en respuesta.
| Nombre | Descripción |
|---|---|
v-on | Escucha eventos del DOM y ejecuta métodos cuando ocurren. |
<button @click="handleClick">Haz clic</button>El uso de @ es una abreviatura de v-on. Por ejemplo, @click es equivalente a v-on:click.
Optimización
Las directivas de optimización están diseñadas para mejorar el rendimiento de la aplicación. Permiten controlar cómo Vue.js compila y renderiza los elementos, evitando actualizaciones innecesarias.
| Nombre | Descripción |
|---|---|
v-pre | Omite la compilación de Vue para un elemento y sus hijos. |
v-cloak | Oculta el contenido hasta que Vue termine de compilar el componente. |
v-once | Renderiza un elemento o componente solo una vez (no se actualiza). |
v-memo | Memoriza un subárbol del DOM para optimizar renderizados repetidos. |
<div v-pre>{{ Esto no será compilado }}</div>
<div v-cloak>{{ message }}</div>En general son directivas de uso avanzado. Son mucho menos frecuentes que las anteriores (al principio no os preocupéis demasiado por ellas).