Envíanos tu consulta
![iconoCurso](data:image/svg+xml;utf8, <svg width="920" height="920" viewBox="0 0 920 920" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M539.443 162L460 299.637L380.557 162H116L460 758L804 162H539.443Z" fill="%234DB983"/>
<path d="M539.293 162.009L460 299.418L380.707 162.009H254L460 519L666 162L539.293 162.009Z" fill="%23435467"/>
</svg>)
Curso completo de Vue 3
DISPONIBLE EN MODALIDAD:
Aprende a utilizar uno de los frameworks para el desarrollo web más populares del momento y empieza a crear aplicaciones modernas y escalables.
Aprende a utilizar uno de los frameworks para el desarrollo web más populares del momento y empieza a crear aplicaciones modernas y escalables.
Formación en Vue 3 bonificable para empresas
¿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
Cursos Online
Formación a través de nuestro campus virtual
Bonificable hasta el 100% por FUNDAE
Horario Flexible de formación
Teoría, práctica y vídeos guiados
Acceso multiplataforma, desde PC y móviles
100% tutorizado por un formador experto
Diploma de aprovechamiento
Aula Virtual Personalizada
Videoconferencia en tiempo real, síncrono, a través de Zoom
Bonificable hasta el 100%, por FUNDAE.
Planificación a medida
100% práctico con proyectos evolutivos
Temario adaptado a vuestras necesidades
100% tutorizado con feedback inmediato
Diploma de aprovechamiento
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 1
Introducció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 2
Interacció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 3
Vite 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 4
Componentes
- ¿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 5
La 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 6
Renderizado 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 7
Instancias 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 8
Manejo 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 9
Mejorando 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 10
Directivas
- ¿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 11
Composables 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 12
Routing 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 13
Peticiones 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 14
Control 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 15
Responsive 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 16
Linting 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 17
Estado 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 18
Despliegue 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
Testimonios de nuestros clientes
![iconoCurso](data:image/svg+xml;utf8, <svg width="920" height="920" viewBox="0 0 920 920" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M130 461.01V794H796V128H130V461.01Z" fill="%23037ACD"/>
<path d="M666.684 434.692C682.63 438.393 697.121 446.723 708.33 458.632C714.464 465.175 723.551 477.09 724.283 479.936C724.494 480.768 695.539 500.188 677.989 511.061C677.367 511.472 674.817 508.746 671.965 504.517C663.411 492.061 654.426 486.69 640.691 485.748C620.501 484.375 607.399 494.917 607.559 512.534C607.399 516.87 608.401 521.17 610.461 524.99C614.909 534.169 623.161 539.651 649.044 550.844C696.704 571.297 717.095 584.805 729.765 604.005C743.912 625.419 747.094 659.601 737.486 685.024C726.914 712.661 700.71 731.43 663.833 737.663C652.418 739.667 625.36 739.357 613.111 737.142C586.375 732.402 561.014 719.215 545.362 701.909C539.228 695.165 527.29 677.538 528.033 676.265C529.985 674.822 532.034 673.516 534.168 672.357L558.896 658.137L578.042 647.054L582.058 652.977C587.65 661.525 599.919 673.219 607.308 677.127C628.533 688.31 657.648 686.707 672.056 673.86C678.19 668.269 680.72 662.467 680.72 653.919C680.72 646.213 679.786 642.896 675.76 637.044C670.58 629.678 660.008 623.445 629.978 610.468C595.632 595.697 580.843 586.498 567.289 571.968C559.458 563.52 552.069 550.022 548.996 538.739C546.456 529.349 545.824 505.82 547.832 496.33C554.91 463.111 579.96 440.113 616.103 433.259C627.84 431.044 655.118 431.886 666.624 434.732L666.684 434.692Z" fill="white"/>
<path d="M510.799 462.49L511 489.749H424.199V736H362.801V489.749H276V463.012L276.724 435.551C277.036 435.129 329.875 434.919 393.917 435.029L510.467 435.34L510.799 462.49Z" fill="white"/>
</svg>)
![iconoCurso](data:image/svg+xml;utf8, <svg width="920" height="920" viewBox="0 0 920 920" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M799 123H121V801H799V123Z" fill="%23F6DE00"/>
<path d="M576.039 652.822C589.702 675.108 607.48 691.491 638.911 691.491C665.319 691.491 682.191 678.262 682.191 660.098C682.191 638.27 664.871 630.536 635.793 617.836L619.859 611.007C573.869 591.439 543.315 566.924 543.315 515.096C543.315 467.35 579.727 431 636.649 431C677.168 431 706.307 445.094 727.325 481.973L677.667 513.794C666.735 494.225 654.947 486.511 636.649 486.511C617.984 486.511 606.156 498.336 606.156 513.794C606.156 532.884 617.995 540.618 645.34 552.464L661.274 559.282C715.425 582.483 746 606.092 746 659.284C746 716.596 700.917 748 640.388 748C581.195 748 542.958 719.822 524.242 682.872L576.039 652.822ZM350.879 658.337C360.894 676.085 370.002 691.084 391.897 691.084C412.833 691.084 426.048 682.943 426.048 651.082V434.633H489.775V651.946C489.775 717.858 451.06 747.858 394.607 747.858C343.584 747.858 314.028 721.481 299 689.71L350.879 658.337Z" fill="black"/>
</svg>)
![iconoCurso](data:image/svg+xml;utf8, <svg width="920" height="920" viewBox="0 0 920 920" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M611.551 792.501L458.711 750.071L424.641 368.031H798.921L764.831 750.011L611.551 792.501Z" fill="%23284CE7"/>
<path d="M735.631 725.693L764.771 399.273H611.781V760.023L735.631 725.693Z" fill="%232B65F4"/>
<path d="M502.73 540.961L506.93 587.821H611.78V540.961H502.73Z" fill="%23EAEAEA"/>
<path d="M494.289 446.121L498.549 492.981H611.779V446.121H494.289Z" fill="%23EAEAEA"/>
<path d="M611.78 662.65L611.58 662.7L559.39 648.61L556.06 611.24H509.02L515.59 684.81L611.57 711.46L611.78 711.4V662.65Z" fill="%23EAEAEA"/>
<path d="M512.73 264.211H569.48V287.941H536.48V311.671H569.48V335.401H512.73V264.211Z" fill="black"/>
<path d="M580.832 264.211H637.582V284.841H604.582V289.001H637.582V336.461H580.832V314.771H613.832V310.641H580.832V264.211Z" fill="black"/>
<path d="M648.93 264.211H705.68V284.841H672.68V289.001H705.68V336.461H648.93V314.771H681.93V310.641H648.93V264.211Z" fill="black"/>
<path d="M720.541 540.961L729.001 446.121H611.621V492.981H677.651L673.381 540.961H611.621V587.821H669.321L663.881 648.581L611.621 662.691V711.441L707.681 684.811L708.381 676.901L719.391 553.541L720.541 540.961Z" fill="white"/>
<path d="M495.358 232.969L461.258 614.949L307.988 657.439L155.138 615.009L121.078 232.969H495.358Z" fill="%23E34D24"/>
<path d="M308.219 624.961L432.069 590.631L461.199 264.211H308.219V624.961Z" fill="%23F06524"/>
<path d="M241.929 357.923H308.219V311.062H190.719L203.359 452.753H308.219V405.902H246.209L241.929 357.923Z" fill="%23EAEAEA"/>
<path d="M252.487 476.182H205.457L212.017 549.752L307.997 576.402L308.217 576.342V527.592L308.007 527.642L255.827 513.552L252.487 476.182Z" fill="%23EAEAEA"/>
<path d="M155.898 129.148H179.708V152.668H201.488V129.148H225.308V200.388H201.488V176.528H179.708V200.388H155.898V129.148Z" fill="black"/>
<path d="M256.617 152.768H235.617V129.148H301.397V152.768H280.397V200.388H256.617V152.768Z" fill="black"/>
<path d="M311.84 129.148H336.67L351.94 154.148L367.2 129.148H392V200.388H368.32V165.078L351.94 190.408H351.53L335.14 165.078V200.388H311.84V129.148Z" fill="black"/>
<path d="M403.887 129.148H427.707V176.838H461.187V200.388H403.887V129.148Z" fill="black"/>
<path d="M308.047 452.752H365.747L360.307 513.522L308.047 527.632V576.382L404.107 549.752L415.827 418.482L416.967 405.902H308.047V452.752Z" fill="white"/>
<path d="M308.047 357.923H421.227L425.427 311.062H308.047V357.923Z" fill="white"/>
</svg>)
Curso de Vue 3 bonificado 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
Aulas Virtuales Personalizadas
¿Quieres formar a un grupo de trabajadores con temario a medida? ¡Esta es tu modalidad!
¡Me interesa!
Catálogo de cursosLos mejores cursos de Big DataLos mejores cursos de Desarrollo WebLos mejores cursos de Desarrollo MóvilLos mejores cursos de Bases de DatosLos mejores cursos de Machine LearningLos mejores cursos de ERP y CMSLos mejores cursos de LenguajesLos mejores cursos de Google WorkspaceLos mejores cursos de Clean codeLos mejores cursos de Productividad
© 2024 Imagina, Imagina Group. Todos los derechos reservados