Envíanos tu consulta
Términos y condiciones *
logoImagina
Aprende a utilizar uno de los frameworks para el desarrollo web más populares del momento y empieza a crear aplicaciones modernas y escalables.
iconClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClient
Aprende Vue 3: Curso completo
¿A quién va dirigido?
Desarrolladores web que quieran aprender a desarrollar aplicaciones Vue y conocer todos sus fundamentos para crear soluciones extensibles y mantenibles
Objetivos
  • Aprender a desarrollar aplicaciones web con Javascript y TypeScript con Vue
  • Aprende a manejar componentes de Vue a través de su Options API y Composition API
  • Crea formularios reactivos con VeeValidate, añadide sistemas de enrutado y controla con autenticación el acceso a tus aplicaciones web
  • Conoce Vite, frameworks y librerías de componentes como Quasar y Vuetify, además de empezar a manejar Pinia para controlar el estado de la aplicación
  • Desarrollar un proyecto final evolutivo, crea scripts para builds y aprende a desplegar en Vercel
¿Qué vas a aprender?

Aprende a utilizar uno de los frameworks para el desarrollo web más populares del momento y empieza a crear aplicaciones modernas y escalables.

Requisitos
  • Tener experiencia desarrollando aplicaciones de navegador con HTML, CSS, JavaScript y Typescript
  • Disponer de un equipo con acceso a un usuario con permisos suficientes de instalación SW
  • Tener Visual Studio Code (https://code.visualstudio.com/download), Node LTS y NPM (https://nodejs.org/en/) y GIT (https://git-scm.com/) instalados previamente

Nuestras modalidades de formación

icon
Cursos Online
modalidadesImg
Formación a través de nuestro campus virtual
modalidadesImgBonificable hasta el 100% por FUNDAE
modalidadesImg
Horario Flexible de formación
modalidadesImg
Teoría, práctica y vídeos guiados
modalidadesImgAcceso multiplataforma, desde PC y móviles
modalidadesImg
100% tutorizado por un formador experto
modalidadesImg
Diploma de aprovechamiento
Me interesa
icon
Aula Virtual Personalizada
aulasModalidades
Videoconferencia en tiempo real, síncrono, a través de Zoom
aulasModalidades
Bonificable hasta el 100%, por FUNDAE.
aulasModalidadesPlanificación a medida
aulasModalidades
100% práctico con proyectos evolutivos
aulasModalidades
Temario adaptado a vuestras necesidades
aulasModalidades
100% tutorizado con feedback inmediato
aulasModalidades
Diploma de aprovechamiento
Me interesa
Vue 3: Últimas plazas

A continuación te mostramos las próximas convocatorias disponibles de nuestras formaciones online. Si te interesa realizar una formación a medida, para un grupo de trabajadores, puedes realizar un Aula Virtual Personalizada.

Temario del curso
tema 1Introducción al desarrollo con Vue en Typescript y puesta en marcha
  • Configurando Visual Studio Code para desarrollar con Typescript y Vue
  • ¿Qué es Vue?
  • ¿Qué es Vue CLI?
  • Comandos esenciales de Vue CLI
  • Options API vs Composition API
  • Opciones de creación de proyecto y guardado de plantillas
  • Creando el primer proyecto Vue con Javascript
  • Creando el primer proyecto Vue y TypeScript
  • Analizando la arquitectura y los archivos de configuración del proyecto en detalle
  • Despliegue del proyecto localmente
tema 2Interacción con el DOM
  • Las plantillas de Vue
  • Instancias y sintaxis de las plantillas de Vue
  • Gestión de datos y binding
  • ¿Qué son las directivas y cómo se usan?
  • El Re-renderizado
  • Eventos: Objetos, datos y modificadores
  • Los eventos de teclado
  • Uso de código en las plantillas
  • El binding doble
  • Las propiedades y la reacción ante los cambios
  • La escucha activa ante cambios
  • Uso de clases CSS para dar estilos de manera dinámica
tema 3Vite y Vue 3
  • ¿Qué es Vite y cuáles son sus características principales?
  • Vite en la actualidad y por qué es interesante usar Vite
  • Instalación y configuración esencial de Vite
  • Haciendo uso de Vite CLI para crear un proyecto Vue 3 con Typescript
  • Analizando la estructura del proyecto creado
  • Scripts y despliegue local del proyecto
  • Trabajando con Vite en el CWD (Current Working Directory)
  • Configuraciones de interés y buenas prácticas trabajando con Vite
tema 4Componentes
  • ¿Qué es un componente?
  • Almacenando datos en componentes
  • Registrando componentes
  • El componente raíz (root)
  • Creando componentes
  • Usando componentes
  • Buenas prácticas de estructuración del proyecto
  • Estructuras de carpetas alternativas
  • ¿Cómo se nombran los componentes?
  • Dando estilos a los componentes
  • ¿Qué son las funciones de composición?
  • Componentes reutilizables
tema 5La comunicación entre componentes
  • El problema de la comunicación entre componentes
  • Las Props como método de comunicación vertical descendente
  • Nombrado de Props
  • Uso de Props en componentes hijo
  • Validando las Props de un componente
  • Los eventos como método de comunicación vertical ascendente
  • Comprendiendo el flujo unidireccional del flujo de datos
  • Funciones Callback como método de comunicación
  • Bus de eventos
  • Provide / Inject
tema 6Renderizado condicional y bucles
  • El renderizado condicional con v-if
  • Alternativas a v-if
  • Renderizado con bucles v-for
  • Alternativas al utilizar v-for
  • Bucles sobre objetos literales
  • V-if con v-for
  • Detectando cambios en arrays y objetos
tema 7Instancias de Vue
  • Conceptos básicos de la instancia de Vue
  • Uso de múltiples instancias
  • Composition API vs Options API
  • setup()
  • Métodos de Reactividad
  • Uso de componentes
  • Actualización del DOM por parte de Vue
  • El ciclo de vida de Vue
tema 8Manejo de Formularios
  • ¿Qué es el v-model y para qué sirve?
  • Binding en campos de tipo input
  • Agrupando datos
  • Pre-Poblando los inputs de un formulario
  • Modificadores de inputs
  • Binding de un textarea y guardado de saltos de línea
  • Uso de checkboxes y almacenamiento de datos en arrays
  • Uso de radio buttons
  • Uso de desplegables
  • Creando un Custom Control
  • Enviando un formulario
tema 9Mejorando formularios con VeeValidate
  • ¿Qué es VeeValidate y qué versión usar para Vue 3 a día de hoy?
  • ¿Por qué usar VeeValidate?
  • Instalación y configuración básica para trabajar desde la Composition API de Vue
  • Creación de un formulario con VeeValidate
  • Estableciendo valores por defecto
  • Asociando campos a variables de formulario
  • Estableciendo el método submit y reset del formulario
  • ¿Cómo incluir validación de campos de formularios VeeValidate?
  • Validación de campos obligatorios
  • Validación para campos de texto
  • Validación para campos numéricos
  • Validación para campos de tipo checkbox
  • Validación para desplegables
  • Validación para campos de fechas
  • Anidación de campos y validación para arrays o listas
  • Validación de expresiones regulares
  • Validación entre campos para confirmación de contraseñas
  • Accediendo a errores de validación
  • Mostrando errores al usuario
  • Deshabilitando campos y botones de un formulario según validación
  • Formularios multi-step
  • Validadores globales
  • Internacionalización con i18n
  • Plugin DevTools para VeeValidate
tema 10Directivas
  • ¿Qué son las directivas?
  • ¿Cómo funcionan las directivas?
  • Introducción a funciones Hook
  • Creando una directiva
  • Pasando valores a directivas personalizadas
  • Pasando argumentos a directivas personalizadas
  • Modificando directivas personalizadas
  • Registrando directivas
  • Usando múltiples modificadores
  • Pasando valores complejos a directivas
  • Directivas interesantes
tema 11Composables y Plugins
  • Reutilización de código.
  • ¿Qué es un composable?
  • Como crear un composable
  • Buenas prácticas al crear un composable
  • Mixins vs Composables
  • Filtros
  • ¿Qué es un plugin?
  • Creando un plugin
tema 12Routing en Vue
  • ¿Qué es “vue-router” y por qué es necesario?
  • Configuración de “vue-router”
  • Configurando y cargando rutas
  • Modos de enrutado: Hash vs Historial
  • Router Links
  • Ruta Activa
  • Navegación imperativa
  • Configurando parámetros para las rutas
  • Obteniendo parámetros de las rutas
  • Usando parámetros de las rutas
  • Reaccionando ante cambios en los parámetros de las rutas
  • Nested Routing – Child Routes
  • Navegando a las rutas “child”
  • Dinamizando los Router Links
  • Named Routes
  • Usando parámetros Query
  • Named Router Views
  • Redireccionamiento
  • Transiciones entre rutas
  • Pasando fragmentos Hash
  • Controlando el comportamiento de Scroll
  • Router Guards
  • “beforeEnter” Guards
  • “beforeLeave” Guards
  • Carga “lazy” de las rutas
tema 13Peticiones HTTP
  • Llamadas HTTP
  • Tipos de llamadas HTTP
  • Códigos de respuesta HTTP
  • ¿Cómo realizar peticiones HTTP en un proyecto Vue?
  • Introducción a Axios
  • Axios vs Fetch
  • Configuración del proyecto
  • Envío de peticiones HTTP con Axios
  • Accediendo a las respuestas y su contenido
  • Controlando errores en las respuestas
  • Mostrando mensajes al usuario cuando se da un error
  • Uso de interceptores en Axios
  • Instancias personalizadas de Axios
tema 14Control de rutas y métodos de autenticación
  • Añadiendo un login
  • Autenticación con JWT
  • Enviando el Token al Backend
  • Autenticación con OAuth
  • Auth Guards y redirección de rutas
  • Añadiendo un logout
tema 15Responsive Frameworks y librerías de componentes Vue
  • Frameworks y librerías de componentes
  • ¿Porqué usarlos?
  • Uso de Bootstrap
  • Uso de Tailwind
  • Uso de VueTify
  • Introducción a Quasar
  • ¿Cuál elegír?
tema 16Linting para estadarizar el desarrollo en Vue
  • Introducción a EsLint y plugin Visual Studio Code
  • Conguraciones personalizadas
  • Aplicando reglas
  • Eliminando reglas
  • Extendiendo reglas
  • Ejecutando eslint
  • Introducción a Prettier
  • Usando Prettier y EsLint
tema 17Estado de la aplicación en Vue con Pinia
  • El problema del manejo del estado de la aplicación
  • El concepto de estado centralizado
  • Introducción y fundamentos de Vuex
  • Pinia como alternativa actual
  • Vuex vs Pinia
tema 18Despliegue de proyecto Vue
  • Desplegando a producción
  • Creación de variables de entorno locales
  • Creación de builds
  • Preparación para el despliegue
  • Netlify
  • Vercel
  • Creación de proyecto desde Vercel
  • Desplegando un proyecto nuevo con Git
  • Analizando el resultado
  • Automatizando despliegues a partir de commits a una rama determinada

Formación Bonificada para Empresas a través de FUNDAE

Somos entidad organizadora de FUNDAE, todas nuestras formaciones se pueden bonificar hasta el 100%, sujeto a vuestro crédito disponible y a cumplir con todos los requisitos de realización establecidos por la Fundación Estatal para el Empleo.

 

Si desconoces el funcionamiento de las bonificaciones, ofrecemos el servicio de gestión en FUNDAE, consúltanos cualquier duda que te surja.

Descargar Guía FUNDAE
imagenFundae
iconClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClienticonClient