Imagina
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?

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 como desarrollar aplicaciones web front-end con el potente y ligero framework JavaScript, Vue.js, en su última versión.

Duración
Consultar
Requisitos
Tener conocimientos básicos de Javascript, Html y CSS.
Bonificación FUNDAE
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.

Temario

1

Introducción a VueJS

  • ¿Qué es VueJS?
  • ¿Qué es Vue CLI?
  • Creando el primer proyecto Vue
  • Análisis de la estructura del proyecto y buenas prácticas
  • Despliegue de un proyecto en local
  • Uso de plugins
  • Pre Procesadores CSS
  • Variables de entorno
  • Targets de despliegue
  • Prototipado instantáneo
2

Interacción con el DOM

  • Las plantillas de VueJS
  • Instancias y sintáxis 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
3

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
4

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
5

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
6

Componentes

  • ¿Qué es un componente?
  • Almacenando datos en componentes
  • Registrando componentes
  • El componente raíz (root)
  • Creando un componente
  • Buenas prácticas de estructuración del proyecto
  • Estructuras de carpetas alternativas
  • ¿Cómo se nombran los componentes?
  • Dando estilos a los componentes
7

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
8

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
9

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
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
11

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 mixins globales
  • Los mixins y el ámbito
12

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 JavaScript
  • Exclusión de CSS de una animación
  • Creando una animación en JavaScript
  • Animando componentes dinámicos
  • Uso de “transition-group” para animación de listas
  • Añadiendo animaciones
13

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
14

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
15

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
16

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
  • El Grid de Vuetify
  • Los Layouts de Vuetify
  • Elevation en Vuetify
17

Despliegue de proyecto Vue

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

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 asinconismo
  • 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
19

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
20

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
21

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
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

Otros clientes que están aprendiendo con nosotros…

¿Tienes alguna duda? Puedes hablar con uno de nuestros profesores

¡Pregúntanos!

¿Quieres un curso personalizado?

*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.