Vue.js: De cero a experto

Vuex, unit test, composition api, options api, autenticación, composables, deployment, file structure, lazy load, y más

4.90 (3539 reviews)
Udemy
platform
Español
language
Web Development
category
15,990
students
43.5 hours
content
Aug 2023
last update
$199.99
regular price

What you will learn

Aprender Vue 3 a profundidad

Vue Router

Vuex

Test unitarios

Options API y Composition API

Modularización y re-utilizacion de código

Description

Bienvenidos a mi curo de Vue.js de cero a experto!

Vue.js es un framework de JavaScript que durante los últimos años esta creciendo de manera exponencial por su facilidad de integración, versatilidad y performance que tiene.

Este curso tiene por objetivo enseñarte Vue.js desde cero, pero si tu eres alguien que conoce el framework, de igual manera te servirá mucho ya que rápidamente despegaremos en conceptos fundamentales como las pruebas automáticas, Vuex y el nuevo composition api.

Aquí les dejo una lista de algunos puntos que tocaremos en el curso:

  1. Vue aislado progresivo

  2. Directivas

  3. Peticiones HTTP

  4. Pruebas unitarias y de integración

  5. Vuex

    1. Actions

    2. Mutations

    3. Getters

      1. Getters simples

      2. Getters como funciones

    4. State

    5. Modules

  6. Axios y Fetch API

  7. Interceptores

  8. Autenticación

  9. Router

  10. Diferentes estructuras (Layouts)

  11. LazyLoad

  12. OptionsAPI

  13. CompositionAPI

  14. Mocks

  15. Spies

  16. Comunicación entre componentes de diferentes formas

  17. Eventos

  18. Modificadores de eventos

  19. Despliegues a producción

  20. Diferenciación entre Development, Test y Production

  21. Guards globales

  22. Guards por ruta

  23. Guards asíncronos y síncronos

  24. Carga de archivos

  25. Validación de imágenes

  26. Reutilización de componentes

  27. Composable Functions

  28. Firebase RestAPI

  29. Cloudinary API y SDK

  30. Mucho más

Este curso de Vue.js cuenta con más de 35 horas de video bajo demanda sobre contenido exclusivo de Vue.js y temas relacionados directamente, el cual esta pensado para que al terminar, puedas llevar a cabo las aplicaciones que tienes en mente sin ningún problema y realizar las pruebas automáticas de las mismas. Adicionalmente, se muestra y trabaja en proyectos pequeños, medianos y de gran escala, con el objetivo de darles ideas para el manejo de la estructura de directorio en un proyecto de gran tamaño.


Recuerda que Udemy te ofrece 30 días de garantía si el curso no te parece y también hay videos gratuitos que puedes ver ahora mismo sin ningún compromiso para ver si este es el curso indicado para ti


Content

Introducción

Introducción
¿Cómo funciona el curso?
¿Cómo hacer preguntas?
Instalaciones recomendadas y obligatorias

Reforzamiento de JavaScript

Introducción a la sección
Temas puntuales de la sección
Inicio de proyecto - Bases de JavaScript
Let vs Var vs Const
Template literals
Object literal
Arrays
Functions
Functions - Segunda Parte
Desestructuración de objectos
Desestructuración de Arreglos
Importaciones y exportaciones
Exportar funciones - Tarea
Promesas
Argumentos a las promesas
Fetch API
Axios
Async - Await
Async - Await - Aplicado
Ternarios y null check
Código fuente de la sección

Introducción a Vue.js

Introducción a la sección
Temas puntuales de la sección
Breve introducción sobre Vue.js
Puntos interesantes de Vue.js
Hola Mundo - Vue.js
Representación declarativa
Estado del componente - Data
Introducción a los eventos
Directiva v-for
Indices y desestructuración dentro de v-for
Directiva v-model
Modificadores de eventos
Directivas v-if y v-show
Recapitulación de la sección
Código fuente de la sección

Vue CLI - Primera aplicación real

Introducción a la sección
Temas puntuales de la sección
Bonus: Atajos de Vue.js
Inicio de proyecto - FundamentosApp
Estructura de directorios generada por defecto
Estructura básica del directorio SRC
Mi primer componente
Estado del componente y Vue DevTools
Propiedades computadas - Computed Properties
Incrementar y Decrementar
Properties - Props
Diferentes formas de definir las props
Validación de los props
Código fuente

IndecisionApp - Continuación

Introducción a la sección
Temas puntuales de la sección
Demostración del objetivo final
Continuación de proyecto - FundamentosApp
Indecision Component
Watch - Observar cambios en una propiedad reactiva
Realizar petición HTTP a un backend
Pulir detalles de nuestra aplicación
Código fuente de la sección

Introducción a las pruebas unitarias y de integración

Introducción a la sección
Temas puntuales de la sección
Introducción a las pruebas unitarias y de integración
Mi primera prueba
Expect
Snapshot
Verificar valor en una etiqueta HTML
FindAll vs Find
Simular eventos
Optimización de código
Leer props desde pruebas
Enviar Props y evaluarlas
Pruebas iniciales en el Indecision component
Definir las pruebas a realizar
Spy y Mocks
Spy con la instancia de Vue
Tarea: Probar que el getAnswer fue llamado
Pruebas sobre Fetch Api
Simular un fallo en el API
Código fuente de la sección

Pokemon Game

Introducción a la sección
Temas puntuales de la sección
Demostración del objetivo al final de la sección
Inicio de proyecto - Pokémon Game
Estructura del proyecto y componentes
Diseño de los componentes
Funcionalidad de PokemonPicture
Lógica de los nombres de los pokémons
Obtener nombres de los 4 pokémons
Mostrar las opciones posibles
Seleccionar un pokémon aleatoriamente
Emit - Emitir eventos
Resultado y reinicio de juego
Desplegar nuestro juego en producción
Código fuente de la sección

Pokemon Game - Unit Test

Introducción a la sección
Temas puntuales de la sección
Pruebas con Axios
Pruebas en helpers
getPokemonNames y getPokemonOptions
Pruebas en PokemonPicture
PokemonPicture - Segunda Parte
Pruebas en PokemonOptions
Pruebas con emisiones
Pruebas en PokemonPage
Snapshot con data y stubs
Tarea: Pruebas de que los componentes existan
Pruebas las propiedades reactivas del componente
Código fuente de la sección

Vue Router y Ciclo de vida de los componentes - Options Api

Introducción a la sección
Temas puntuales de la sección
Concepto de SPA
Inicio de proyecto - Rutas y Ciclo de Vida
Creación de páginas necesarias
Configuración manual del Vue Router
No page found
LazyLoad de páginas
Navegar entre páginas - RouterLink
RouterLink Active
Lifecycle Hooks - Ciclo de vida de un componente
Disparar métodos del ciclo de vida
Segmentos del URL y QuueryParameters
Recibir Props por URL
Petición HTTP y redirecciones
Redirección desde el router
RouterLink Personalizado
Multiples Router-View - Rutas Hijas
Segundo Layout
Arreglar nuestro NavBar personalizado
Guard - Protección de rutas ( Global )
Guard global asíncrono
Guard específico para rutas
Código fuente de la sección

Introducción a Vuex

Introducción a la sección
Temas puntuales de la sección
Introducción a Vuex
Inicio de proyecto - Bases Vuex
Instalación manual de Vuex
Leer el state reactivo
Mutations
Actions
mapActions
Bloquear botón mientras una acción trabaja
Getters
Modules
Actions, Getters, Mutations, State desde un módulo
Separar módulo en archivos independientes
Código fuente de la sección

Journal App - Options Api + Vuex

Introducción a la sección
Temas puntuales de la sección
Inicio de proyecto - Journal
Usar SASS en nuestro proyecto
Cambiar los colores por defecto del bootstrap
Estructura modular
Estructura del DaybookLayout
Componentes EntryList y Entry
Componente NoEntrySelected
EntryView
Mini tarea - Fab Icon
Instalar Vuex y crear un módulo reutilizable
Journal - Vuex Module
Entradas ficticias y punto de restauración
mapGetters - getEntriesByTerm
EntryComponent - Información al componente
GetEntryById - Obtener una entrada por el id
Mostrar entrada en pantalla o redireccionar al usuario
Cargar entrada cuando cambia el url
Configurar RestAPI en Firebase
Resumen de la sección
Código fuente de la sección

CRUD - Vuex

Introducción a la sección
Temas puntuales de la sección
Demostración de la sección
Continuación de la sección anterior
Cargar entradas desde el backend
Realizar el commit de una mutación
Tarea - Mostrar un loading mientras cargamos las entradas
FAB - Emitir acción
CRUD - Actualizar entrada
Preparar el camino para la inserción de registros
CRUD - Crear una nueva entrada
CRUD - Borrar una entrada
Mostrar mensajes de confirmación y espera
Seleccionar y mostrar una imagen local
Referencias locales
Cloudinary
Subir archivo desde JavaScript
Código fuente de la sección

Testing Vuex

Introducción a la sección
Temas puntuales de la sección
Continuación de proyecto - JournalApp - Testing
Pruebas en el AboutComponent
Primeras pruebas con el router
Tarea - Pruebas en el FAB Component
Daybook Router
Comprobar que las rutas carguen los componentes esperados
Probar función de mapeo de ruta
Pruebas con carga de archivos
Borrar archivos subidos en las pruebas
Vuex - Probar el estado inicial del Journal
Mutation - setEntries
Mutation - updateEntry
Mutation - addEntry y deleteEntry
Getters - getEntriesByTerm y getEntryById
Actions - loadEntries
Actions - updateEntry
Actions - createEntry y deleteEntry
Pruebas en el componente Entry
Solución de la tarea - EntryComponent
Pruebas en el componente EntryList
EntryList - Segunda parte de pruebas
Pruebas en el EntryView Component
Pruebas con el método de borrar y salir
Escuchar el dispatch en un método
Código fuente de la sección

Composition API - Bases

Introducción a la sección
Temas puntuales de la sección
Introducción al Composition API
Ejemplo del Composition API
Bonus - Guía de atajos Composition API
Inicio de proyecto - Bases CompositionAPI
Counter usando composition API
Mi primer composable - useCounter
Vue DevTools - Composition API
Ref vs Reactive
Composition API - Lifecyle Hooks
Router keep-alive
Peticiones http
Mostrar los usuarios y conectar la paginación
Tarea - Creación de un nuevo composable
Uso del router dentro del setup
Leer parametros y segmentos de URL desde el setup
Composable usePokemon
Watch - Observar cambios en objetos reactivos
Bloquear la salida de una ruta
Código fuente de la sección

Vuex con el composition API

Introducción a la sección
Temas puntuales de la sección
Continuación de la sección
Diseño del State
Vuex Getters - Composition API
Tarea - Crear y usar getters
Diseño de la lista de tareas
Getters como función
Commit Mutations - Composition API
Composable - useTodo
Introducción a los Slots
Slots y NamedSlots
Funcionalidad básica de nuestro modal
Scoped Slots
Tarea - Crear nueva tarea usando el modal
Scoped Slots aplicado
Código fuente de la sección

Autenticación - Vuex - Composition API

Introducción a la sección
Temas puntuales de la sección
Continuación de la sección
Diseño del Layout de autenticación
Rutas de Login y Register
Vuex - Auth Module
Manejo del formulario y useAuth composable
Obtener token de acceso de Firebase
Actualizar el displayName del usuario
Mutation - LoginUser
Mensaje de error o navegación
Actions - Login de usuario
Actualizar el displayName de Firebase
Comprobar el estado del idToken
Recargar el estado de la autenticación
AuthGuard
Logout y nombre de usuario conectado
Interceptores
Código fuente de la sección

Composition API Testing

Introducción a la sección
Temas puntuales de la sección
Testing autenticado
Pruebas en Vuex Crear MockStore
AuthModule - Vuex Module
Mutations - loginUser
Mutations - logout
Getters - username currentState
Actions - createUser - Error usuario ya existe
Action - createUser - Crea el usuario en Firebase
Action - checkAuthentication - POSITIVA
Action - checkAuthentication - NEGATIVA
Pruebas en composable functions
Probar una petición fallida de creación de usuario
Login exitoso y login fallido
Pruebas en el logout
Pruebas en propiedades computadas del composable function
Pruebas en el Navbar
Pruebas con el Router en composition API
Mantener pruebas con ambos routers
Pruebas en el login component
Formulario incorrecto, retorna error de autenticación
Formulario con credenciales correctas
Código fuente de la sección

Cierre del curso

Despedida del curso

Screenshots

Vue.js: De cero a experto - Screenshot_01Vue.js: De cero a experto - Screenshot_02Vue.js: De cero a experto - Screenshot_03Vue.js: De cero a experto - Screenshot_04

Reviews

Luis
May 30, 2023
Muy buen curso, explica a profundidad las herrasmientas de Vue, ademas de buenas practicas para emplear al momento de desarrollar, lo unico es que como ya el curso tiene algo de tiempo con las versiones actuales de node, da algunos problemas al momento de ejecutar los proyectos o los tests.
Udemy
May 28, 2023
Estoy muy contento, ya trabajo con Vue hace un año, pero esto es un refuerzo excelente. Está plagado de buenas prácticas y explicaciones concisas y fáciles de entender. Super recomendado!
Joseph
May 23, 2023
Buen curso hasta ahora (sección 15). Entrega una gran cantidad de herramientas para FrontEnd. Sería interesante verlo trabajar con algún BackEnd como Laravel o .NET y conectando a bases de datos (tal vez encuentre algo en las secciones siguientes).
Saúl
May 11, 2023
Los cursos de Fernando siempre son una garantía de CALIDAD. Da las herramientas y conocimientos que, con práctica, pueden servir mucho para aprender la tecnología en cuestión y en este caso con VUE no es la excepción. Genial curso y nunca duden en tomar los cursos de Fernando
Gerardo
May 3, 2023
Supero mis expectativas. El curso de Vue.js es un programa completo que cubre todos los aspectos esenciales del desarrollo web moderno utilizando el framework Vue.js. A lo largo del curso, los estudiantes aprenden desde lo básico, como la configuración del entorno de desarrollo y la creación de aplicaciones Vue, hasta conceptos más avanzados como el manejo de estado con Vuex, enrutamiento con Vue Router y la integración con APIs. El curso comienza con una introducción a Vue.js, sus conceptos fundamentales, la instancia de Vue, el sistema de plantillas y la gestión de eventos. A medida que avanza, se abordan temas como componentes, comunicación entre componentes, directivas personalizadas, mixins y filtros. Posteriormente, el curso se adentra en el manejo de estado y cómo utilizar Vuex para gestionar el flujo de datos en aplicaciones de mayor envergadura. También se exploran aspectos como la autenticación de usuarios y la protección de rutas en aplicaciones Vue. En la parte final del curso, se enseña cómo utilizar Vue Router para gestionar la navegación dentro de la aplicación y cómo integrar Vue con APIs externas para interactuar con bases de datos y servicios web. Además, se cubren temas como el rendimiento, la optimización y la implementación de aplicaciones Vue en producción. Este curso es altamente recomendable para aquellos que deseen aprender Vue.js desde cero o mejorar sus habilidades en el desarrollo web moderno. La estructura del curso es clara y bien organizada, y el instructor presenta los conceptos de manera fácil de entender. Los ejemplos prácticos y los proyectos del curso son útiles para aplicar lo aprendido en situaciones reales y consolidar los conocimientos adquiridos. Si estás interesado en aprender Vue.js o mejorar tus habilidades en el desarrollo web, este curso de Udemy es una excelente opción.
Alejandro
April 24, 2023
Excelente curso, mas que todo el amplio margen de cosas que se ven. Me gusta que se mantenga el options API y el composition API ya que me toco trabajar en una app con Vue 2. Me ayudo demasiado este curso. Excelente como siempre Fernando!
Victor
April 14, 2023
Creo que de todas las secciones, la app de mapbox fue la que más me costó entender, supongo que es por el tema de TypeScript, más allá de esto el curso es excelente, Fernando explica de las mil maravillas. ahora vamos por TS!!
Santiago
April 12, 2023
Con Fernando voy a la fija, necesito entender algo el lo explica con máximo detalle y lo hace ver fácil
Oscar
April 10, 2023
Como todos los cursos de Fernando Herrera es un curso top, en el que aprenderás las bases de Vue de mano de uno de los mejores profesores de Javascript.Vamos por el siguiente jeje
Carlos
April 5, 2023
Me parece increíble el curso. Perfectamente explicado, claro, conciso. Fernando nunca falla. Lo recomiendo 100%.
David
April 3, 2023
Un curso completísimo. Fernando es un crack y se nota que sabe bien lo que explica. Gracias a este curso he podido adquirir los conocimientos para, en mi actual empresa, cambiar de proyecto y empezar a desarrollar una aplicación multiplataforma con Ionic + Vue. Muchas gracias.
Emanuel
March 22, 2023
Fernando en su línea, llega un momento que aunque te salga al principio la encuesta, sabes que será un curso de 5 estrellas.
Miguel
March 16, 2023
Como siempre y con otros cursos de Fernando, todo muy bien explicado. Se sigue el proceso con mucha claridad y el curso se hace muy ameno. Gracias por tanto contenido y de tan buena calidad!
Magdiel
March 13, 2023
Me gustó mucho este curso, realmente aprendí muchas cosas y es de agradecer que se haya enseñado las múltiples formas de trabajar en Vue, sin embargo he de decir que el añadido de TypeScript no me agrado, pues fue todo muy fortuito y el MapBox me pedía la tarjeta y tuve que seguirlo con el proyecto descargado, me hubiera gustado mas que ese apartado se hubiera adueñado Quasar (Hacer el mapa con quasar), pues se hubiera repasado todo lo anterior y no hubiera sido confuso como tratar de enseñar algo de TypeScript de forma tan rápida. Lejos de lo negativo, que solo fue una sección, por lo demás todo esta súper claro y se entiende muy bien. Muchas gracias hermano :D
Pablo
March 11, 2023
Como siempre, una maestría para convertir lo complejo a sencillo es la principal cualidad del maestro Fernando

Coupons

DateDiscountStatus
8/2/202195% OFF
expired
8/23/202195% OFF
expired
9/13/202195% OFF
expired
9/20/202194% OFF
expired
10/11/202195% OFF
expired
10/30/202195% OFF
expired
11/14/202194% OFF
expired
11/23/202195% OFF
expired
6/28/202295% OFF
expired
7/25/202288% OFF
expired
7/26/202285% OFF
expired
8/10/202288% OFF
expired
8/29/202288% OFF
expired
10/9/202285% OFF
expired
10/10/202288% OFF
expired

Charts

Price

Vue.js: De cero a experto - Price chart

Rating

Vue.js: De cero a experto - Ratings chart

Enrollment distribution

Vue.js: De cero a experto - Distribution chart
4119364
udemy ID
6/12/2021
course created date
8/2/2021
course indexed date
Bot
course submited by