Vue.
js: Un Framework Progresivo de JavaScript
¿Qué es Vue.js?
● Framework progresivo de JavaScript para
construir interfaces de usuario
● Basado en componentes reutilizables
● Diseñado para ser adoptado
gradualmente
● Ideal para aplicaciones de una sola
página (SPA)
Instalación de Vue CLI
● Instalar Vue CLI globalmente: npm install -g @vue/cli
● Verificar la instalación: vue --version
● Crear un nuevo proyecto: vue create nombre-del-proyecto
● ¿Qué ventajas crees que ofrece usar un CLI para desarrollar?
Estructura de un
Proyecto Vue
● src/: Contiene el código fuente principal
● components/: Carpeta para componentes
Vue
● App.vue: Componente raíz de la
aplicación
● main.js: Punto de entrada de la aplicación
● public/: Archivos estáticos y index.html
Componentes en Vue
● Bloques de construcción reutilizables
● Contienen template, script y style
● Pueden tener su propio estado y lógica
● Se pueden anidar y comunicar entre sí
Creando un
Componente
● Crear un archivo .vue (ej:
MyComponent.vue)
● Definir template con HTML
● Agregar script para lógica y datos
● Opcionalmente, incluir estilos
● Exportar el componente para su uso
En app.vue
Directivas en Vue
● Atributos especiales con prefijo v-
● Aplican comportamiento reactivo al DOM
● Ejemplos: v-if, v-for, v-on, v-bind, v-model
● Permiten manipular el DOM de forma declarativa
Uso de v-if
● Renderiza condicionalmente un elemento
● Sintaxis: v-if="condición"
● Ejemplo: <h1 v-if="isVisible">Título</h1>
● Se puede combinar con v-else y v-else-if
Eventos en Vue
● Manejo de interacciones del usuario
● Se utiliza la directiva v-on o @
● Ejemplo: v-on:click="metodo" o @click="metodo"
● Pueden pasar argumentos a los métodos
Métodos en Vue
● Funciones definidas en el componente
● Se utilizan para manejar lógica y eventos
● Se definen en la sección "methods" del
script
● Pueden acceder a datos y propiedades
del componente
Data Binding con v-model
● Crea un enlace bidireccional entre datos y formularios
● Sintaxis: v-model="propiedad"
● Actualiza automáticamente el estado y la vista
● Útil para inputs, textareas, selects, etc.
Computed Properties
● Propiedades calculadas basadas en datos
reactivos
● Se actualizan automáticamente cuando
cambian sus dependencias
● Más eficientes que métodos para cálculos
complejos
● Se definen en la sección "computed" del
script
Directiva v-for
● Renderiza una lista de elementos
● Sintaxis: v-for="item in items"
● Se usa con arrays y objetos
● Requiere una key única para cada elemento
Manejo de Estilos en
Vue
● Estilos inline con v-bind:style
● Clases dinámicas con v-bind:class
● Estilos scoped en componentes
● Uso de preprocesadores CSS (SASS,
Less)
Comunicación entre Componentes
● Props para pasar datos de padre a hijo
● Eventos personalizados para comunicación hijo a padre
● Provide/Inject para componentes profundamente anidados
● Vuex para gestión de estado global
Introducción a Vuex
● Biblioteca de gestión de estado para Vue
● Centraliza el estado de la aplicación
● Utiliza conceptos de state, getters,
mutations y actions
● Ideal para aplicaciones de mediana a
gran escala
Ciclo de Vida de un Componente
● Hooks que se ejecutan en diferentes etapas
● created(): Al crear la instancia del componente
● mounted(): Cuando el componente se monta en el DOM
● updated(): Cuando los datos del componente cambian
● destroyed(): Cuando el componente se destruye
Vue Router
● Biblioteca oficial para enrutamiento en
Vue
● Permite crear aplicaciones de una sola
página (SPA)
● Mapea rutas a componentes
● Soporta rutas anidadas y dinámicas
Transiciones y Animaciones
● Componente <transition> para efectos de entrada/salida
● Animaciones CSS y JavaScript
● Transiciones entre rutas
● Librería de animaciones integrada
● ¿Cómo crees que las animaciones pueden mejorar la
experiencia del usuario?
Optimización y
Rendimiento
● Uso de v-show vs v-if para toggling
frecuente
● Implementación de lazy loading para
componentes
● Uso de keep-alive para cachear
componentes
● Optimización de computed properties y
watchers
