VUE JS 2

(Vue.js 2, Vue-Rx, Vue CLI, REST, Axios, Postman, Nuxt y Vue.js Devtools)

Conceptualización, diseño, desarrollo, pruebas y despliegue aplicaciones web basadas en Vue.js 2, consumiendo servicios REST en back-end. Se desarrollará un caso práctico empresarial incluyendo pruebas, depuración y monitoreo.

  • Descripción
  • Sesiones

Descripción

CURSO

VUE JS 2
(Vue.js 2, Vue-Rx, Vue CLI, REST, Axios, Postman, Nuxt y Vue.js Devtools)

RESUMEN

Conceptualización, diseño, desarrollo, pruebas y despliegue aplicaciones web basadas en Vue.js 2, consumiendo servicios REST en back-end. Se desarrollará un caso práctico empresarial incluyendo pruebas, depuración y monitoreo.

CAPACIDAD

Al culminar el curso, el alumno contará con sólidos conocimientos teóricos y prácticos para la conceptualización, diseño, desarrollo, despliegue y consumo de servicios REST utilizando Vue.js 2; herramientas de automatización para la creación de proyectos, pruebas y análisis de código.

REQUISITOS
  • Conocimientos básicos de JavaScript.
  • Conocimientos básicos de HTML.
  • Conocimientos avanzados de servicios REST.
  • Conocimientos de arquitecturas (fullstack: back-end y front-end).
METODOLOGÍA
  • Exposición de aspectos teóricos.
  • Desarrollo de casos prácticos.
  • Compartir experiencias de los participantes (instructor y alumnos).
  • Discusión de casos empresariales (casuísticas).
  • Evaluación continua (teórica y práctica en cada sesión).
TECNOLOGÍAS Y RECURSOS
  • Servicios REST.
  • Webpack, Vue CLI y Nuxt.
  • Vue.js y Vue-Rx.
  • DOM, HTML y CSS.
  • Axios y Postman.
  • Vue.js Devtools.
Sesión 01:

INTRODUCCIÓN A VUE.JS Y AMBIENTE DE DESARROLLO

  • ¿Qué es Vue.js? y ¿cuál es su filosofía?
  • El ecosistema de Vue.js.
  • Componentes y directivas(corazón y alma de Vue.js)
  • Herramientas de desarrollo y despliegue (Webpack, vue-cli, Nuxt).
  • Configuración del ambiente de desarrollo.
  • Mi primera aplicación en Vue.js.
  • Buenas prácticas y convenciones.
Sesión 02:

INTERPOLACIONES, DIRECTIVAS Y EVENTOS

  • Interpolaciones ({{ ... }}).
  • Directivas.
  • v-text, v-html.
  • v-bind (class y style).
  • v-if, v-else, v-else-if y v-show.
  • v-for (témplate y objetos).
  • Eventos
  • v-on (click, keyup, submit, submit).
  • Modificadores personalizados (config.keyCodes).
  • Anulación de eventos (preventDefault(), prevent).
Sesión 03:

COMPONENTES

  • Introducción a componentes.
  • Ciclo de vida de un componente.
  • Estructura de un componente (name, components, data, methods).
  • Comunicación entre componentes.
  • Componentes avanzados.
  • Reutilizando componentes.
Sesión 04:

GESTIÓN DE FORMULARIOS

  • Introducción a formularios.
  • Uso de controles (text, multiline text, checkbox, radio y select).
  • Uso de v-model, v-bind:value y modificadores(lazy, number y trim).
  • Uso de v-on:submit y @submit.prevent.
  • Gestión de errores y excepciones.
Sesión 05:

VALIDACIONES Y GESTIÓN DE ESTADOS

  • Implementando validaciones.
    • Validaciones personalizadas.
    • Usando vee-validate.
  • Introducción a estados.
  • Introducción a Vuex y beneficios.
  • Trabajando con state, getters, mutations y actions.

CREACIÓN DE SERVICIOS REST

  • Introducción a REST(Representational State Transfer).
  • JAX-RS 2.0 y RESTful.
  • Recursos, métodos y anotaciones: @Path, Métodos HTTP (@GET, @PUT, @POST y @DELETE).
  • Producción y consumo (@Produces, @Consumes y application/json).
  • Creando un servicio REST CRUD con acceso a base de datos.
  • Pruebas del servicio usando Postman.
Sesión 07:

CONSUMO SERVICIOS REST

  • Introducción a Axios(HTTP).
  • Consulta de datos del servidor (GET).
  • Envío de datos al servidor (POST, PUT y DELETE).
  • Validación de datos y eventos.
  • Trabajando con interceptors(Vue-Rx).
Sesión 08:

DEPURACIÓN, REPASO Y EVALUACIÓN

  • Console.log, debbuger y breakpoints.
  • Herramientas y plugins (Vue.js devtools).
  • Repaso general de un caso práctico.
  • Evaluación teórica y solución por parte del instructor.
  • Evaluación práctica y solución por parte del instructor.
  • Lecciones aprendidas.
  • Cierre del curso.