Directivas
En Vue.js, las directivas son atributos especiales con el prefijo v- que proporcionan un comportamiento reactivo a los elementos del DOM. Son fundamentales para crear interfaces dinámicas, ya que permiten manipular la visibilidad, iterar sobre datos, enlazar variables con formularios y manejar eventos de manera declarativa, evitando la manipulación directa del DOM. Las directivas facilitan la construcción de aplicaciones escalables, optimizando el rendimiento y reduciendo errores relacionados con la actualización manual de la interfaz.
Las directivas se utilizan en diferentes contextos: v-if para renderizado condicional, v-for para iteraciones sobre arrays u objetos, v-model para enlace bidireccional de formularios y v-on para la gestión de eventos. Comprender su sintaxis, estructuras de datos y principios de programación orientada a objetos permite diseñar componentes eficientes y evitar problemas comunes como fugas de memoria o algoritmos ineficientes. Este tutorial enseñará cómo aplicar directivas integradas, crear directivas personalizadas y cómo interactúan con los datos y métodos del componente en aplicaciones reales.
Al finalizar, el lector será capaz de implementar interfaces reactivas complejas, optimizar la actualización del DOM y mantener buenas prácticas de desarrollo, contribuyendo a una arquitectura sólida de software con Vue.js.
Ejemplo Básico <template>
text<div>
<h1 v-if="mostrarTitulo">Bienvenido a Directivas en Vue.js</h1>
<ul>
<li v-for="item in items" :key="item.id">{{ item.nombre }}</li>
</ul>
<input v-model="nuevoItem" placeholder="Agregar nuevo elemento" />
<button @click="agregarItem">Agregar</button>
</div>
</template>
<script>
export default {
data() {
return {
mostrarTitulo: true,
nuevoItem: '',
items: [
{ id: 1, nombre: 'Elemento 1' },
{ id: 2, nombre: 'Elemento 2' }
]
};
},
methods: {
agregarItem() {
if (this.nuevoItem.trim() !== '') {
this.items.push({ id: this.items.length + 1, nombre: this.nuevoItem });
this.nuevoItem = '';
}
}
}
};
</script>En este ejemplo básico, la directiva v-if controla la visibilidad del título según la variable booleana mostrarTitulo. La directiva v-for itera sobre el array items, generando elementos li para cada objeto y usando :key para garantizar la unicidad y optimización del DOM virtual. La directiva v-model permite enlazar el input con la variable nuevoItem, sincronizando datos y UI de manera reactiva. El método agregarItem valida la entrada, agrega un nuevo elemento al array y limpia el campo. Este ejemplo muestra la interacción entre directivas y datos, aplicando buenas prácticas de Vue.js y evitando errores comunes como fugas de memoria.
Ejemplo Práctico <template>
text<div>
<h2 v-show="mostrarTareas">Lista de Tareas</h2>
<ul>
<li v-for="tarea in tareas" :key="tarea.id">
<input type="checkbox" v-model="tarea.completada" /> {{ tarea.nombre }}
<button @click="eliminarTarea(tarea.id)">Eliminar</button>
</li>
</ul>
<input v-model="nuevaTarea" placeholder="Agregar nueva tarea" />
<button @click="agregarTarea">Agregar</button>
</div>
</template>
<script>
export default {
data() {
return {
mostrarTareas: true,
nuevaTarea: '',
tareas: [
{ id: 1, nombre: 'Revisar código', completada: false },
{ id: 2, nombre: 'Escribir documentación', completada: true }
]
};
},
methods: {
agregarTarea() {
const nombre = this.nuevaTarea.trim();
if (nombre) {
this.tareas.push({ id: Date.now(), nombre, completada: false });
this.nuevaTarea = '';
}
},
eliminarTarea(id) {
this.tareas = this.tareas.filter(t => t.id !== id);
}
}
};
</script>En el ejemplo práctico, v-show controla la visibilidad del encabezado sin eliminarlo del DOM, lo que mejora el rendimiento en cambios frecuentes. La directiva v-for itera sobre el array tareas, y :key garantiza la unicidad. La directiva v-model enlaza los checkboxes con la propiedad completada, asegurando reactividad. Los métodos agregarTarea y eliminarTarea manejan la lógica de modificación del array de forma segura, generando identificadores únicos con Date.now(). Este ejemplo aplica buenas prácticas: validación de entradas, encapsulación de lógica y optimización de rendimiento evitando manipulación directa del DOM.
Las mejores prácticas incluyen usar :key para identificar elementos en iteraciones, computed properties para cálculos complejos, minimizar la manipulación directa del DOM y usar v-show/v-if según frecuencia de cambios. Errores comunes son el uso excesivo de v-if/v-show, iteraciones ineficientes en arrays grandes y olvidos de handlers. Para depuración y análisis de rendimiento, se recomienda Vue DevTools. En términos de seguridad, evitar v-html con datos no confiables para prevenir XSS. La optimización se logra mediante actualización selectiva del DOM y uso inteligente de computed y watchers.
📊 Tabla de Referencia
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| v-if | Renderizado condicional de un elemento | <div v-if="mostrarTitulo">Mostrar</div> |
| v-show | Controla visibilidad sin eliminar del DOM | <div v-show="mostrarTitulo">Mostrar</div> |
| v-for | Iteración sobre arrays u objetos | <li v-for="item in items" :key="item.id">{{ item.nombre }}</li> |
| v-model | Enlace bidireccional de formularios | <input v-model="nuevoItem" /> |
| v-on | Vinculación de eventos a métodos | <button @click="agregarItem">Agregar</button> |
| Directivas Personalizadas | Encapsula lógica repetitiva del DOM | Vue.directive('focus', { inserted: el => el.focus() }) |
Dominar las directivas permite manipular el DOM de manera reactiva y crear interfaces dinámicas eficientes. Las directivas integradas cubren la mayoría de los casos de uso, mientras que las personalizadas permiten encapsular lógica compleja para reutilización y escalabilidad. Tras este aprendizaje, se recomienda explorar Vuex, componentes dinámicos y optimización de rendimiento. La aplicación práctica en proyectos reales consolida el conocimiento y mejora la arquitectura general del software. Recursos adicionales incluyen la documentación oficial, tutoriales comunitarios y proyectos open-source.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior