Imagina Formación

Curso de Desarrollo Web con VueJS 3

VueJS es uno de los frameworks más populares para desarrollar aplicaciones modernas y escalables en el lado del cliente.

Si quieres ser desarrollador front-end o full-stack, o incluso si ya te dedicas al desarrollo web, este es el curso ideal para ti.

¿Qué voy a aprender con este curso de Vue?

Este curso de VueJS tiene todo lo que necesitas saber para convertirte en un desarrollador web profesional de VueJS y te va permitir tener las bases para integrar tus conocimientos de desarrollo web para desarrollar aplicaciones web impresionantes y profesionales.

¿A quién va dirigido?

A todo programador que quiera conocer este framework y aprender a desarrollar aplicaciones web.

Objetivos

El objetivo del curso es aprender paso a paso cómo desarrollar aplicaciones web front-end con el potente y ligero framework Vue.js, en su última versión, utilizando TypeScript como lenguaje de programación.

Duración
Consultar
Requisitos
Es imprescindible tener conocimientos básicos sobre Javascript, Html y CSS, y se recomienda conocer el lenguaje de programación TypeScript.
Bonificación FUNDAE
Sí, solo disponible para empresas.

Quiero recibir información de este curso


    *requerido

    • Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
    • Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
    • Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
    • Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.

    1

    Repaso a TypeScript

    • Principales diferencias entre JavaScript y TypeScript
    • Tipos y variables en TypeScript
    • Creación de funciones y clases
    • Estructuras de control en Typescript
    • Ejecutando archivos TypeScript
    • Configurando Visual Studio Code como editor de código
    2

    Introducción a VueJS

    • ¿Qué es VueJS?
    • ¿Qué es Vue CLI?
    • Creando el primer proyecto Vue
    • Configuración de Vue localmente
    3

    Interacción con el DOM

    • Las plantillas de VueJS
    • Instancias y sintaxis de las plantillas de VueJS
    • 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
    4

    Renderizado

    • El renderizado condicional con v-if
    • Alternativas a v-if
    • Renderizado con bucles v-for
    • Alternativas a v-for
    • Bucles sobre objetos literales
    • Bucles sobre listas
    5

    Instancias de VueJS

    • Conceptos básicos de la instancia de VueJS
    • Uso de múltiples instancias
    • Accediendo a la instancia de VueJS
    • Uso de datos y métodos con VueJS
    • $el
    • $data
    • $refs
    • Uso de $refs en las plantillas
    • La API de VueJS
    • Montando una plantilla
    • Uso de componentes
    • Limitaciones de determinadas plantillas
    • Actualización del DOM por parte de VueJS
    • El ciclo de vida de VueJS
    6

    Webpack y VueJS

    • La utilidad del Servidor de Desarrollo
    • ¿Qué es el Workflow y por qué es necesario?
    • Instalación y análisis de Vue CLI
    • Usando Vue Cli para crear proyectos
    • Entendiendo Webpack y la estructura de carpetas
    • Los archivos .vue y los objetos
    • El entorno de producción y cómo realizar una build
    • Depuración de un proyecto VueJS
    7

    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
    8

    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
    9

    Uso avanzado de componentes

    • El paso de contenido
    • Paso de contenido a través las funciones de composición
    • ¿Qué son las funciones de composición?
    • La importancia de reutilizar código
    • Funciones de composición vs React Hooks
    10

    Manejo de Formularios

    • 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
    • ¿Qué es el v-model y para qué sirve?
    • Creando un Custom Control
    • Enviando un formulario
    11

    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
    12

    Filtros y Mixins

    • ¿Qué es un filtro?
    • Creando un filtro
    • Filtros globales
    • Encadenado de múltiples filtros
    • Filtros vs Propiedades
    • ¿Qué son los mixins?
    • Creando un mixin
    • Usando un mixin
    • Creando mixin globales
    • Los mixins y el ámbito
    13

    Animaciones y Transiciones

    • ¿Qué es una transición?
    • Preparando el código para usar transiciones
    • Montando una transición
    • Accediendo a clases CSS para transiciones
    • Creando una transición “fade”
    • Creando una transición “slide”
    • Propiedades para transiciones y animaciones con mixins
    • Animaciones v-if y v-show
    • Usando una animación inicial
    • Uso de clases CSS diversas
    • Uso de nombres y atributos dinámicos
    • Transiciones entre múltiples elementos
    • Escucha activa ante eventos de transición con Hooks
    • Entendiendo las animaciones en TypeScript
    • Exclusión de CSS de una animación
    • Creando una animación en TypeScript
    • Animando componentes dinámicos
    • Uso de “transition-group” para animación de listas
    • Añadiendo animaciones
    14

    Peticiones HTTP

    • Configuración de “vue-resource”
    • Peticiones HTTP
    • Interceptando Peticiones
    • Interceptando Respuestas
    • ¿Qué es un “resource”?
    • Creación de recursos personalizados
    • Recursos vs Peticiones HTTP tradicionales
    • Comprendiendo plantillas URL
    • Introducción a Axios
    • Configuración del proyecto
    • Configuración de Axios a nivel del proyecto
    • Envío de peticiones HTTP con Axios
    • Accediendo a las respuestas y su contenido
    • Configuración global para las peticiones de Axios
    • Uso de interceptores en Axios
    • Instancias personalizadas de Axios
    15

    Routing en VueJS

    • ¿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
    • Active Links y estilo
    • 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
    16

    Autenticación

    • La autenticación en SPAs
    • Configuración del proyecto
    • Añadiendo un registro
    • Añadiendo un login
    • Uso de “Vuex” para el envío de peticiones de autenticación
    • Almacenando datos de autenticación en Vuex
    • Autenticación con JWT
    • Accediendo a otros recursos de Vuex
    • Enviando el Token al Backend
    • Auth Guards
    • Actualizando el estado de la aplicación
    • Añadiendo un logout
    • Auto login y Auto logout
    17

    Responsive Frameworks

    • Introducción a Responsive Frameworks
    • Viewport
    • Densidades de pantalla
    • Diseños líquidos
    • Ritmo Vertical
    • Media Queries
    • Introducción a Bootstrap
    • Características de Bootstrap
    • Paso a Paso para empezar con Bootstrap
    • Añadiendo Bootstrap a un proyecto VueJS
    • El Container de Bootstrap
    • Responsive Breakpoints de Bootstrap
    • Z-Index en Bootstrap
    • El sistema de Grid de Bootstrap
    • La tipografía en Bootstrap
    • Las listas en Bootstrap
    • Las tablas en Bootstrap
    • Las imágenes en Bootstrap
    • Las figuras en Bootstrap
    • Otras utilidades de Bootstrap
    • Los componentes de Bootstrap
    • ¿Qué es el Material Design?
    • Vuetify como Responsive Framework alternativo a Bootstrap
    • ¿Por qué Vuetify es una buena opción?
    • El Generador de Temas de Vuetify
    • Instalación
    • El Grid de Vuetify
    • Los Layouts de Vuetify
    • Elevation en Vuetify
    18

    Despliegue de proyecto Vue

    • Preparación para el despliegue
    • Desplegando la aplicación de VueJS
    19

    Estado de la aplicación

    • El problema del manejo del estado de la aplicación
    • El concepto de estado centralizado
    • Comprendiendo los getters
    • Mapeo de getters y propiedades
    • Las mutaciones y el asincronismo
    • Comprendiendo las Acciones
    • Mapeo de acciones y funciones
    • El binding doble (v-model) y Vuex
    • Más buenas prácticas de estructuración de proyectos
    • Uso de namespaces
    20

    NuxtJS

    • ¿Qué es NuxtJS?
    • ¿Qué es el Renderizado desde Servidor?
    • NuxtJS vs otros Renderizados desde Servidor
    • Creando una app con NuxtJS
    • Análisis de la estructura de carpetas y ficheros
    • ¿Qué se puede crear con NuxtJS?
    • Las rutas en NuxtJS
    • Creando rutas con direcciones dinámicas
    • Añadiendo links y analizando la navegación
    • Validación de parámetros
    • Creación de rutas enlazadas
    • Creando un layout
    • Usando componentes con NuxtJS
    21

    NuxtJS II

    • El fichero de configuración de NuxtJS
    • Trabajando con variables de entorno
    • Configuración del enrutado de NuxtJS
    • Animando transiciones de página
    • Añadiendo plugins
    • Registrando un filtro de datos
    • Comprendiendo los módulos
    22

    NuxtJS III

    • Añadiendo un Middleware
    • Testando un Middleware
    • Comenzando un proyecto con una plantilla
    • Aplicaciones Universales vs SPA vs Estáticas
    • Construyendo una aplicación Universal
    • Construyendo una aplicación SPA
    • Construyendo una aplicación Estática
    • Mejorando el proceso de generación
    • Limitando la cantidad de requests
    • Ajustando el Store de Vuex

    ¿No es lo que estabas buscando? También hacemos temarios a medida para empresas, consultanos.

    Realiza el curso desde donde quieras gracias a nuestro campus online.
    Dispondrás de un profesor experimentado en programación y desarrollo, que te ayudará
    y responderá a todas tus dudas.
    Tutor personal
    Proyecto final
    Diploma de certificación
    Plataforma online
    Disponibilidad horaria
    Bolsa de empleo

    ¿Quieres realizar esta formación sin coste para tu empresa?

     

    ¡Sin desplazamientos! Impartimos la formación en tu empresa.

    Imagina Formación es una entidad organizadora de la Fundación Estatal de modo que puedes gestionar la formación bonificada de los cursos con nosotros.

    Nos encargamos de todos los trámites para conseguir la bonificación sin ningún coste adicional. Cumplimos con todos los requisitos para que nuestros cursos sean 100% bonificables.

    Consulta disponibilidad y precios

    ¿Tienes alguna duda?

    Puedes hablar con uno de nuestros profesores.

    ¡Pregúntanos!

    ↑ Ir arriba