En este curso aprenderemos a usar VUE 2 con el que descubriremos todo el potencial de un framework de JS que cabe en tan sólo 19kb .

Equipo Docente

Francisco Javier Casero

Frontend Engineer en The Hotels Network

Contenido del curso

1. Empezando con Vue2

– Introducción
– Arrancando una instancia de Vue
– Básicos de Vue

2. Interactuando con el DOM

 

– Templates en vue e interacción con la instancia
– Empezando a trabajar con la instania
– Enlazando atributos HTML(BINDING)
– Binding de datos en dos direcciones(v-model)
– Directivas de Vue
– Eventos I. Básicos
– Eventos II. Aceder al Objetos de eventos del DOM
– Eventos III. Argumentos y eventos del DOM
– Modificadores de Eventos y de teclado
– Shorthands
– Escribir JS en nuestra plantilla
– Computed properties
– Watchers
– Clases de CSS dinámias
– Claes de CSS mediante objetos
– Usar style en lugar de clases de CSS y arrays de estilos

3. Renderizado condicional

– Uso de v-if
– Uso de else y v-else-if
– Uso de v-show
– Uso de claves únicas para elementos reusables

4. Renderizado de listas

 

– Renderizar listas con v-for
– Uso de v-for con el tag template
– Obtener el index y la key con v-for
– Iterar números con v-for
– A tener en cuenta sobre los arrays
– Mostrar elementos filtrados

5. Ejercicio TO-DO

– Introducción al ejercicio
– Creando la cabecera
– Añadidendo un titulo editable
– Listado de tareas

6. Instancia de VUE a fondo

 

– Usando varias instancias
– Comunicación entre instancias
– Uso de los refs
– Como VUE actualiza el DOM
– Trabajar con el ciclo de vida

7. VueCLI y WebPack

– Introducción a VueCLI
– Instalando VueCLI y nuestro template de WebPack
– Análisis de la estructura del proyecto
– Archivos VUE
– Que es el objeto de los single file components

8. Componentes

 

– Qué son los componentes y como funcionan
– El objeto data debe ser una función
– Registrar componentes de forma global y local
– Componentes dinámicos y mantenerlos en memoria
– Props. La vía para comunicarse con un componente hijo
– Props II. Cuando usar camelcase o kebab-case
– Props III. Uso de props y validación dentro del componente hijo
– Eventos personalizados I. La vía para emitir datos hacia el componente padre
– Eventos personalizados II. EventBus, comunicación entre componentes que no están relacionados
– Slots
– Named slots
– Scoped slots

9. Transiciones

– Empezar a usar las transiciones
– Cómo funcionan las transiciones
– Usando transiciones de CSS
– Usando animaciones de CSS
– Mezclando animaciones y transiciones
– Uso de la propiedad appear
– Transciones personalizadas
– Transiciones entre elementos
– Animación de listas on transition-group

10. Ejercicio Sistema de Comentarios

 

– Introducción al ejercicio
– Creado el componente comentario
– Eliminando comentarios
– Añadiendo el campo de comentario
– Usando transiciones y contenido dinámico

11. Vue Router

– Qué es Vue Router. Instalación
– Configuración de las rutas
– Modos de navegación
– Navegar mediante router-links
– Resaltar los enlaces de la ruta actual
– Navegar manipulando el historial del navegador
– Parámetros de la ruta
– Observar cambios en rutas
– Rutas anidadas
– Navegación de rutas anidadas
– Named routes
– Query params
– Redirecciones
– Comportamiento del scroll
– Transiciones en el router
– Navigation Guards Globales
– Navigation Guards de ruta
– Navigation Guards de componentes
– LazyLoading

 

– Vuex. Para que
– Como funciona Vuex
– Primer ontacto con el estado centralizado
– Getters
– Mapeado de getters
– Mutations
– Actions
– Generar una estructura por módulos
– Módulos y separación por archivos

13. Ajax con Axios

– Como instalar y hacer peticiones get con AXIOS