Scribd
Cargar
10 vistas

Vue.js_ Un Framework Progresivo de JavaScript

Vue.js es un framework progresivo de JavaScript diseñado para construir interfaces de usuario basadas en componentes reutilizables, ideal para aplicaciones de una sola página. Ofrece herramientas como Vue CLI para facilitar la instalación y la creación de proyectos, y permite la comunicación entre componentes mediante props y eventos. Además, incluye características como Vuex para gestión de estado, Vue Router para enrutamiento y optimización de rendimiento a través de técnicas como lazy loading.

Cargado por

mirian.hernandez1
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
10 vistas

Vue.js_ Un Framework Progresivo de JavaScript

Vue.js es un framework progresivo de JavaScript diseñado para construir interfaces de usuario basadas en componentes reutilizables, ideal para aplicaciones de una sola página. Ofrece herramientas como Vue CLI para facilitar la instalación y la creación de proyectos, y permite la comunicación entre componentes mediante props y eventos. Además, incluye características como Vuex para gestión de estado, Vue Router para enrutamiento y optimización de rendimiento a través de técnicas como lazy loading.

Cargado por

mirian.hernandez1
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 21

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

También podría gustarte