Introducción
Las directivas en Vue.js son atributos especiales que puedes agregar a tus elementos HTML para aplicar comportamientos reactivos. Vue.js proporciona varias directivas incorporadas que facilitan la manipulación del DOM de manera declarativa. En esta sección, exploraremos las directivas más comunes y cómo utilizarlas en tus aplicaciones Vue.
Directivas Comunes
v-bind
La directiva v-bind se utiliza para enlazar atributos de HTML a datos de Vue. Esto es útil para actualizar dinámicamente los atributos de los elementos en función del estado de la aplicación.
Sintaxis:
Ejemplo:
<div id="app">
<a v-bind:href="dynamicUrl">Enlace Dinámico</a>
</div>
<script>
new Vue({
el: '#app',
data: {
dynamicUrl: 'https://www.example.com'
}
});
</script>v-model
La directiva v-model se utiliza para crear enlaces bidireccionales de datos en elementos de formulario. Esto significa que cualquier cambio en el elemento de formulario actualizará el estado de Vue y viceversa.
Sintaxis:
Ejemplo:
<div id="app">
<input v-model="message">
<p>Mensaje: {{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
});
</script>v-if
La directiva v-if se utiliza para renderizar condicionalmente un bloque de contenido. Si la expresión evaluada es verdadera, el bloque se renderiza; de lo contrario, se elimina del DOM.
Sintaxis:
Ejemplo:
<div id="app">
<button v-on:click="toggleSeen">Toggle</button>
<p v-if="seen">Ahora me ves</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
},
methods: {
toggleSeen() {
this.seen = !this.seen;
}
}
});
</script>v-else y v-else-if
Las directivas v-else y v-else-if se utilizan junto con v-if para manejar múltiples condiciones.
Sintaxis:
Ejemplo:
<div id="app">
<button v-on:click="changeType">Cambiar Tipo</button>
<p v-if="type === 'A'">Tipo A</p>
<p v-else-if="type === 'B'">Tipo B</p>
<p v-else>Otro Tipo</p>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'A'
},
methods: {
changeType() {
this.type = this.type === 'A' ? 'B' : 'C';
}
}
});
</script>v-for
La directiva v-for se utiliza para renderizar una lista de elementos utilizando los datos de un array.
Sintaxis:
Ejemplo:
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [
{ id: 1, text: 'Elemento 1' },
{ id: 2, text: 'Elemento 2' },
{ id: 3, text: 'Elemento 3' }
]
}
});
</script>v-show
La directiva v-show se utiliza para mostrar u ocultar un elemento mediante la propiedad CSS display. A diferencia de v-if, v-show no elimina el elemento del DOM.
Sintaxis:
Ejemplo:
<div id="app">
<button v-on:click="toggleVisibility">Toggle</button>
<p v-show="isVisible">Puedes verme</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
});
</script>v-on
La directiva v-on se utiliza para escuchar eventos de DOM y ejecutar métodos en respuesta a esos eventos.
Sintaxis:
Ejemplo:
<div id="app">
<button v-on:click="showAlert">Mostrar Alerta</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
showAlert() {
alert('¡Hola, Vue.js!');
}
}
});
</script>Ejercicios Prácticos
Ejercicio 1: Enlace de Datos
Instrucciones:
- Crea una aplicación Vue que tenga un campo de entrada de texto.
- Usa
v-modelpara enlazar el valor del campo de entrada a una propiedad de datos llamadainputText. - Muestra el valor de
inputTexten un párrafo debajo del campo de entrada.
Solución:
<div id="app">
<input v-model="inputText" placeholder="Escribe algo...">
<p>Has escrito: {{ inputText }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
inputText: ''
}
});
</script>Ejercicio 2: Renderizado Condicional
Instrucciones:
- Crea una aplicación Vue con un botón y un párrafo.
- Usa
v-ifpara mostrar el párrafo solo cuando una propiedad de datos llamadaisVisiblesea verdadera. - Usa
v-onpara alternar el valor deisVisiblecuando se haga clic en el botón.
Solución:
<div id="app">
<button v-on:click="toggleVisibility">Toggle</button>
<p v-if="isVisible">Este párrafo es visible</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
},
methods: {
toggleVisibility() {
this.isVisible = !this.isVisible;
}
}
});
</script>Conclusión
En esta sección, hemos explorado algunas de las directivas incorporadas más comunes en Vue.js, como v-bind, v-model, v-if, v-for, v-show y v-on. Estas directivas son herramientas poderosas que te permiten manipular el DOM de manera declarativa y reactiva. Asegúrate de practicar con los ejemplos y ejercicios proporcionados para consolidar tu comprensión de estas directivas. En la próxima sección, profundizaremos en las directivas personalizadas y cómo puedes crear tus propias directivas en Vue.js.
Curso de Vue.js
Módulo 1: Introducción a Vue.js
- ¿Qué es Vue.js?
- Configuración del Entorno de Desarrollo
- Creando Tu Primera Aplicación Vue
- Entendiendo la Instancia de Vue
Módulo 2: Conceptos Básicos de Vue.js
- Sintaxis de Plantillas
- Vinculación de Datos
- Propiedades Computadas y Observadores
- Vinculación de Clases y Estilos
- Renderizado Condicional
- Renderizado de Listas
Módulo 3: Componentes de Vue.js
- Introducción a los Componentes
- Props y Eventos Personalizados
- Slots
- Componentes Dinámicos y Asíncronos
- Comunicación entre Componentes
Módulo 4: Vue Router
- Introducción a Vue Router
- Configuración de Vue Router
- Rutas Dinámicas
- Rutas Anidadas
- Guardias de Navegación
Módulo 5: Gestión de Estado con Vuex
- Introducción a Vuex
- Estado, Getters, Mutaciones y Acciones
- Módulos en Vuex
- Usando Vuex en Componentes
- Patrones Avanzados de Vuex
Módulo 6: Directivas de Vue.js
Módulo 7: Plugins de Vue.js
Módulo 8: Pruebas en Vue.js
- Pruebas Unitarias con Vue Test Utils
- Pruebas de Extremo a Extremo con Cypress
- Simulación de Dependencias
Módulo 9: Conceptos Avanzados de Vue.js
- Funciones de Renderizado y JSX
- Renderizado del Lado del Servidor (SSR) con Nuxt.js
- API de Composición de Vue 3
- Optimización del Rendimiento
Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js
- Construcción para Producción
- Despliegue de Aplicaciones Vue.js
- Integración y Despliegue Continuos (CI/CD)