Vue.js: De cero a experto - Fernando Herrera

Vue.js Tradicional: Options API

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.

Descubre una versión actualizada de este curso aquí mismo

Adquirir Ahora Vista previa gratis

{CONTENIDO DEL CURSO}

1. Introducción
  PRUEBA GRATIS
2. ¿Cómo funciona el curso?
  PRUEBA GRATIS
3. ¿Cómo hacer preguntas?
  PRUEBA GRATIS
4. Instalaciones recomendadas y obligatorias
  PRUEBA GRATIS
5. ¡Únete a Nuestra Comunidad de DevTalles en Discord!
1. Introducción a la sección
2. Temas puntuales de la sección
3. Bonus: Atajos de Vue.js
4. Inicio de proyecto - FundamentosApp
5. Estructura de directorios generada por defecto
6. Estructura básica del directorio SRC
7. Mi primer componente
8. Estado del componente y Vue DevTools
9. Propiedades computadas - Computed Properties
10. Incrementar y Decrementar
11. Properties - Props
12. Diferentes formas de definir las props
13. Validación de los props
14. Código fuente
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo final
  PRUEBA GRATIS
4. Continuación de proyecto - FundamentosApp
5. Indecision Component
6. Watch - Observar cambios en una propiedad reactiva
7. Realizar petición HTTP a un backend
8. Pulir detalles de nuestra aplicación
9. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Introducción a las pruebas unitarias y de integración
4. Mi primera prueba
5. Expect
6. Snapshot
7. Verificar valor en una etiqueta HTML
8. FindAll vs Find
9. Simular eventos
10. Optimización de código
11. Leer props desde pruebas
12. Enviar Props y evaluarlas
13. Pruebas iniciales en el Indecision component
14. Definir las pruebas a realizar
15. Spy y Mocks
16. Spy con la instancia de Vue
17. Tarea: Probar que el getAnswer fue llamado
18. Pruebas sobre Fetch Api
19. Simular un fallo en el API
20. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración del objetivo al final de la sección
  PRUEBA GRATIS
4. Inicio de proyecto - Pokémon Game
5. Estructura del proyecto y componentes
6. Diseño de los componentes
7. Funcionalidad de PokemonPicture
8. Lógica de los nombres de los pokémons
9. Obtener nombres de los 4 pokémons
10. Mostrar las opciones posibles
11. Seleccionar un pokémon aleatoriamente
12. Emit - Emitir eventos
13. Resultado y reinicio de juego
14. Desplegar nuestro juego en producción
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Pruebas con Axios
4. Pruebas en helpers
5. getPokemonNames y getPokemonOptions
6. Nota de actualización
7. Pruebas en PokemonPicture
8. PokemonPicture - Segunda Parte
9. Pruebas en PokemonOptions
10. Pruebas con emisiones
  PRUEBA GRATIS
11. Pruebas en PokemonPage
12. Snapshot con data y stubs
13. Tarea: Pruebas de que los componentes existan
14. Pruebas las propiedades reactivas del componente
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Concepto de SPA
4. Inicio de proyecto - Rutas y Ciclo de Vida
5. Creación de páginas necesarias
6. Configuración manual del Vue Router
7. No page found
8. LazyLoad de páginas
9. Navegar entre páginas - RouterLink
10. RouterLink Active
11. Lifecycle Hooks - Ciclo de vida de un componente
12. Disparar métodos del ciclo de vida
13. Segmentos del URL y QuueryParameters
14. Recibir Props por URL
15. Petición HTTP y redirecciones
16. Redirección desde el router
17. RouterLink Personalizado
18. Multiples Router-View - Rutas Hijas
19. Segundo Layout
20. Arreglar nuestro NavBar personalizado
21. Guard - Protección de rutas ( Global )
22. Guard global asíncrono
23. Guard específico para rutas
24. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Introducción a Vuex
4. Inicio de proyecto - Bases Vuex
5. Instalación manual de Vuex
6. Leer el state reactivo
7. Mutations
8. Actions
9. mapActions
10. Bloquear botón mientras una acción trabaja
11. Getters
12. Modules
13. Actions, Getters, Mutations, State desde un módulo
14. Separar módulo en archivos independientes
15. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Inicio de proyecto - Journal
4. Usar SASS en nuestro proyecto
5. Cambiar los colores por defecto del bootstrap
6. Estructura modular
7. Estructura del DaybookLayout
8. Componentes EntryList y Entry
9. Componente NoEntrySelected
10. EntryView
11. Mini tarea - Fab Icon
12. Instalar Vuex y crear un módulo reutilizable
13. Journal - Vuex Module
14. Entradas ficticias y punto de restauración
15. mapGetters - getEntriesByTerm
16. EntryComponent - Información al componente
17. GetEntryById - Obtener una entrada por el id
18. Mostrar entrada en pantalla o redireccionar al usuario
19. Cargar entrada cuando cambia el url
20. Configurar RestAPI en Firebase
21. Resumen de la sección
22. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Demostración de la sección
  PRUEBA GRATIS
4. Continuación de la sección anterior
5. Cargar entradas desde el backend
6. Realizar el commit de una mutación
7. Tarea - Mostrar un loading mientras cargamos las entradas
8. FAB - Emitir acción
9. CRUD - Actualizar entrada
10. Preparar el camino para la inserción de registros
11. CRUD - Crear una nueva entrada
12. CRUD - Borrar una entrada
13. Mostrar mensajes de confirmación y espera
14. Seleccionar y mostrar una imagen local
15. Referencias locales
16. Cloudinary
17. Subir archivo desde JavaScript
18. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de proyecto - JournalApp - Testing
4. Pruebas en el AboutComponent
5. Primeras pruebas con el router
6. Tarea - Pruebas en el FAB Component
7. Daybook Router
8. Comprobar que las rutas carguen los componentes esperados
9. Probar función de mapeo de ruta
10. Pruebas con carga de archivos
11. Borrar archivos subidos en las pruebas
12. Vuex - Probar el estado inicial del Journal
13. Mutation - setEntries
14. Mutation - updateEntry
15. Mutation - addEntry y deleteEntry
16. Getters - getEntriesByTerm y getEntryById
17. Actions - loadEntries
18. Actions - updateEntry
19. Actions - createEntry y deleteEntry
20. Pruebas en el componente Entry
21. Solución de la tarea - EntryComponent
22. Pruebas en el componente EntryList
23. EntryList - Segunda parte de pruebas
24. Pruebas en el EntryView Component
25. Pruebas con el método de borrar y salir
26. Escuchar el dispatch en un método
27. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Introducción al Composition API
4. Ejemplo del Composition API
5. Bonus - Guía de atajos Composition API
6. Inicio de proyecto - Bases CompositionAPI
7. Counter usando composition API
8. Mi primer composable - useCounter
9. Vue DevTools - Composition API
10. Ref vs Reactive
11. Composition API - Lifecyle Hooks
12. Router keep-alive
13. Peticiones http
14. Mostrar los usuarios y conectar la paginación
15. Tarea - Creación de un nuevo composable
16. Uso del router dentro del setup
17. Leer parametros y segmentos de URL desde el setup
18. Composable usePokemon
19. Watch - Observar cambios en objetos reactivos
20. Bloquear la salida de una ruta
21. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la sección
4. Diseño del State
5. Vuex Getters - Composition API
6. Tarea - Crear y usar getters
7. Diseño de la lista de tareas
8. Getters como función
9. Commit Mutations - Composition API
10. Composable - useTodo
11. Introducción a los Slots
12. Slots y NamedSlots
13. Funcionalidad básica de nuestro modal
14. Scoped Slots
15. Tarea - Crear nueva tarea usando el modal
16. Scoped Slots aplicado
17. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Continuación de la sección
4. Diseño del Layout de autenticación
5. Rutas de Login y Register
6. Vuex - Auth Module
7. Manejo del formulario y useAuth composable
8. Obtener token de acceso de Firebase
9. Actualizar el displayName del usuario
10. Mutation - LoginUser
11. Mensaje de error o navegación
12. Actions - Login de usuario
13. Actualizar el displayName de Firebase
14. Comprobar el estado del idToken
15. Recargar el estado de la autenticación
16. AuthGuard
17. Logout y nombre de usuario conectado
18. Interceptores
19. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Testing autenticado
4. Pruebas en Vuex Crear MockStore
5. AuthModule - Vuex Module
6. Mutations - loginUser
7. Mutations - logout
8. Getters - username currentState
9. Actions - createUser - Error usuario ya existe
10. Action - createUser - Crea el usuario en Firebase
11. Action - checkAuthentication - POSITIVA
12. Action - checkAuthentication - NEGATIVA
13. Pruebas en composable functions
14. Probar una petición fallida de creación de usuario
15. Login exitoso y login fallido
16. Pruebas en el logout
17. Pruebas en propiedades computadas del composable function
18. Pruebas en el Navbar
19. Pruebas con el Router en composition API
20. Mantener pruebas con ambos routers
21. Pruebas en el login component
22. Formulario incorrecto, retorna error de autenticación
23. Formulario con credenciales correctas
24. Código fuente de la sección
1. Introducción a la sección
2. Temas puntuales de la sección
3. Enlaces oficiales
4. Instalación y creación de una app con Quasar
5. Explicación de los archivos del proyecto
6. Explicación del directorio SRC
7. Cambiar la iconografía de la aplicación
8. Crear páginas y rutas
9. Navegación dinámica
10. Typography
11. Crear definición de enlaces en archivo independiente
12. Controlar el menú lateral desde Vuex
13. useUI - Composable Function
14. Propiedades computadas - Set y Get
15. Sistema de Filas y Columnas
16. Cambiar tamaño dependiendo de la pantalla
17. Flexbox
18. Dialogs
19. Inputs y Formularios
20. Valor del formulario y validaciones personalizadas
21. Notificaciones
22. Código fuente
1. Introducción a la sección
2. Temas puntuales de la sección
3. Nota Importante
4. Demostración del proyecto
5. Inicio de proyecto - MapasApp
  PRUEBA GRATIS
6. Preparación inicial del proyecto
7. Configurar Vuex con TypeScript
8. Primer módulo de Vuex - Places
9. Action - getInitialLocation
10. Composable - usePlacesStore
11. Preparar el espacio para colocar el mapa
12. Loading y referencia al contenedor del mapa
13. Mostrar mapa de Mapbox
14. Mostrar mapa tan pronto tenemos la ubicación del usuario
15. Popups y Markers
16. Segundo módulo de Vuex - Map
17. Establecer mapa en el Store
18. Botón para mover a la ubicación central
19. SearchResults - Diseño de componente
20. Implementar un debounce manualmente
21. Mapbox SearchAPI e interfaces
22. Realizar petición Http para obtener los lugares
23. Almacenar los lugares en el Store
24. Mostrar los lugares en el componente de resultados
25. Activar lugar y mover la cámara
26. Colocar marcadores en todos los lugares encontrados
27. Obtener ruta entre dos puntos
28. Obtener información de la ruta
29. Mostrar la ruta en el mapa
30. Borrar la polyline
31. Almacenar la distancia y duración
32. Mostrar la distancia y duración en pantalla
33. Desplegar la aplicación en la web
34. Código fuente de la sección
1. Más información sobre nuestros otros cursos
2. Despedida del curso

Acerca de este curso

$50.00
359 lecciones
43 horas de contenido en video
Fernando Herrera

{REQUISITOS}

• Conocimientos básicos de HTML, CSS y JavaScript:
Ideal para quienes ya han trabajado con la web, aunque sea a nivel básico.

• Muchas ganas de aprender Vue.js de manera estructurada:
El curso empieza desde cero, pero avanza a un nivel profesional.

• Tener Node.js y un editor de código (como VSCode) instalado:
Necesario para trabajar con Vue CLI y herramientas modernas de desarrollo.

• Conexión a internet para descargar dependencias y probar APIs externas:
Parte del contenido depende de peticiones HTTP, Firebase, y servicios como Mapbox.

{DESCRIPCIÓN}

⚠ Importante: Este curso es para personas que quieran aprender Vue de forma tradicional, para aprenderlo de la forma moderna recomendada, es el curso de Vue.js Composition API

Este es el curso definitivo para aprender Vue.js desde cero, con más de 43 horas de contenido en video. A lo largo de 20 secciones, dominarás tanto la Options API como la Composition API, incluyendo temas fundamentales de JavaScript, creación de proyectos con Vue CLI, uso de Vuex para manejo de estado, integración con Firebase, pruebas unitarias, consumo de APIs, rutas, autenticación, composición de componentes, despliegue en producción, y desarrollo de aplicaciones reales como IndecisionApp, PokemonGame, JournalApp y MapasApp con Mapbox.

{CURSOS QUE PODRÍAN INTERESARTE}

OFERTAS→ RECURSOS GRATUITOS→

{PAGO ÚNICO}

Adquiere el curso con un único pago de forma vitalicia, con acceso a la comunidad y posibles actualizaciones futuras.

$50.00

Promociones y descuentos aplican.

COMPRAR AHORA

Suscripción
Devtalles PRO Mensual

^USD16

SABER MÁS

Suscripción
DevTalles PRO Trimestral

^USD48

SABER MÁS

Suscripción
DevTalles PRO Semestral

^USD96

SABER MÁS

Suscripción
DevTalles PRO Anual

^USD176

12 meses por el precio 11

SABER MÁS

¿Cuál es el siguiente paso?

Si quieres profundizar tu conocimiento en Vue, te invitamos a seguir la Ruta de aprendizaje de Vue, diseñada para que sigas aprendiendo.

Ver ruta

Vue.js Tradicional: Options API

Sección 1: Introducción

Sección 2: Reforzamiento de JavaScript

Sección 3: Introducción a Vue.js

Sección 4: Vue CLI - Primera aplicación real

Sección 5: IndecisionApp - Continuación

Sección 6: Introducción a las pruebas unitarias y de integración

Sección 7: Pokemon Game

Sección 8: Pokemon Game - Unit Test

Sección 9: Vue Router y Ciclo de vida de los componentes - Options Api

Sección 10: Introducción a Vuex

Sección 11: Journal App - Options Api + Vuex

Sección 12: CRUD - Vuex

Sección 13: Testing Vuex

Sección 14: Composition API - Bases

Sección 15: Vuex con el composition API

Sección 16: Autenticación - Vuex - Composition API

Sección 17: Composition API Testing

Sección 18: Bonus: Quasar

Sección 19: MapasApp - Mapbox + Rutas + TypeScript + Composition API

Sección 20: Cierre del curso

Acerca de este curso

{REQUISITOS}

{DESCRIPCIÓN}

TypeScript: Tu completa guía y manual de mano.

JavaScript Moderno: Guía para dominar el lenguaje

Node.Js: De cero a experto

{PAGO ÚNICO}

$50.00

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual

¿Cuál es el siguiente paso?

Sección 1: Introducción

Sección 2: Reforzamiento de JavaScript

Sección 3: Introducción a Vue.js

Sección 4: Vue CLI - Primera aplicación real

Sección 5: IndecisionApp - Continuación

Sección 6: Introducción a las pruebas unitarias y de integración

Sección 7: Pokemon Game

Sección 8: Pokemon Game - Unit Test

Sección 9: Vue Router y Ciclo de vida de los componentes - Options Api

Sección 10: Introducción a Vuex

Sección 11: Journal App - Options Api + Vuex

Sección 12: CRUD - Vuex

Sección 13: Testing Vuex

Sección 14: Composition API - Bases

Sección 15: Vuex con el composition API

Sección 16: Autenticación - Vuex - Composition API

Sección 17: Composition API Testing

Sección 18: Bonus: Quasar

Sección 19: MapasApp - Mapbox + Rutas + TypeScript + Composition API

Sección 20: Cierre del curso

Acerca de este curso

TypeScript: Tu completa guía y manual de mano.

JavaScript Moderno: Guía para dominar el lenguaje

Node.Js: De cero a experto

$50.00

Suscripción Devtalles PRO Mensual

Suscripción DevTalles PRO Trimestral

Suscripción DevTalles PRO Semestral

Suscripción DevTalles PRO Anual

Suscripción
Devtalles PRO Mensual

Suscripción
DevTalles PRO Trimestral

Suscripción
DevTalles PRO Semestral

Suscripción
DevTalles PRO Anual