(+34) 673 566 782 - (+34) 960 653 052 formacion@imaginagroup.com

Vue.js 2 se está abriendo hueco en el mercado de los framework para JavaScript y está siendo muy utilizado por las empresas de desarrollo. 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, es muy interesante aprender VueJS 2.

Curso Experto de Desarrollo Web con VueJS 2

¿Qué voy a aprender con este curso online tutorizado?

Tema 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

Tema 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

Tema 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

Tema 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

Tema 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

Tema 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

Tema 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

Tema 8 – Uso avanzado de componentes

  • El paso de contenido
  • Paso de contenido a través de Slots
  • Compilación y estilos de Slots
  • Cambiando el comportamiento del estilado de Slots
  • Uso de múltiples Slots
  • Slots por defecto
  • Componentes dinámicos
  • Manteniendo vivos los componentes dinámicos

Tema 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

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

Tema 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

Tema 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

Tema 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

Tema 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

Tema 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

Tema 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

Tema 17 – Despliegue de proyecto Vue

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

Tema 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
Opiniones de nuestros alumnos

El curso estuvo muy bien y muy completo, además su sistema es muy práctico y los profesores están muy bien preparados, te ayudan a resolver las dudas del tema.
Verónica Hernández

Sobre el curso realizado, creo que es un curso cien por cien recomendable. El temario es bastante completo y la atención del tutor/profesor a la hora de resolver incidencias y problemas es muy buena.
Héctor

Mi impresión sobre el curso es, en general, satisfactoria. El curso me ha parecido bastante completo, con un temario que toca bastantes temas.
Julia Hernandez

Sobre el curso, realmente quede sorprendido por el nivel del mismo. Las únicas palabras que tengo son de agradecimiento por el excelente material y docente que me ha tocado en el curso. En lo personal no encuentro absolutamente nada que no me haya conformado, la verdad que esta muy bien encarado el temario y la modalidad del curso. Es un curso muy completo y que obliga al alumno a esforzarse para realizarlo e investigar temas extras.
Luis Pablo Silviera Lauría

La verdad es que estoy muy contento con el curso y he afianzado lo que ya sabía además de haber aprendido muchas otras cosas nuevas. Asimismo agradecerle a todo vuestro equipo el buen trabajo, me ha llenado de mucha satisfacción. También agradecer especialmente a mi profesor en este curso, su labor ya que ha resuelto perfectamente cada una de las dudas que me ha ido surgiendo durante el curso.
Javier Sainz de Baranda Goñi

¿Cuál es el objetivo del curso?

El objetico del curso es aprender paso a paso como desarrollar aplicaciones web front-end con la potente y ligero framework JavaScript.

¿Cuáles son los requisitos?

Estar familiarizado con conocimientos sobre JavaScript.

¿Quieres un plan de formación personalizado?

Nombre (requerido)

Correo electrónico (requerido)

Teléfono (requerido)

Modalidad (requerido)

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

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

Cada alumno tiene un desarrollador asignado que responderá a todas las dudas que vayan surgiendo durante el curso.

Plataforma online

Descubre nuestro campus de formación, donde podrás visualizar todo el contenido del curso y descargarlo.

Proyecto final

Tendrás la posibilidad de desarrollar tu propia aplicación y de que sea evaluada por un profesional en el sector.

Disponibilidad horaria

Dispondrás de acceso las 24h los 7 días de la semana a nuestra plataforma online. ¡Conéctate cuando quieras!

Diploma de certificación

Al finalizar se te entregará un diploma de aprovechamiento del curso avalado por Imagina Group.

Bolsa de empleo

Disponemos de una bolsa de empleo para antiguos alumnos con el fin de ponerlos en contacto con las empresas.

¿De cuánto tiempo dispongo para realizar el curso?

Los cursos iniciales y medios son de 2 meses, mientras que los avanzados son de 3 meses.

¿Y si finaliza el plazo y no lo he podido terminar?

Si finaliza el plazo puedes paralizar el curso en función de tu carga/laboral y retomarlo más tarde.

¿De qué métodos de pago disponen?

Puedes pagar por transferencia bancaria, PayPal o con tarjeta de crédito a través del TPV de nuestra web.

¿Qué contenidos ofrece el curso?

El material consta de temarios, ejercicios y otro tipo de recursos.

¿Puedo realizar el curso si no resido en España?

Por supuesto. Somos desarrolladores que formamos a nuestros alumnos por toda España y Latinoamérica.

Vivo fuera de España, ¿Cómo puedo hacer el pago?

Si no puedes hacer una transferencia internacional, puedes pagar por de PayPal o con tarjeta de crédito Visa o MasterCard.

Aumenta la competitividad de tu empresa dándole a tus empleados la mejor formación para mejorar sus conocimientos y productividad. ¡Motiva a tus trabajadores y adáptate a los nuevos retos del mercado!

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

En caso de no disponer de espacios destinados a esta actividad, nos encargaremos de buscar aulas donde realizar el curso.

Imagina Formación somos entidad colaboradora y organizadora de la Fundación Tripartita, porque consideramos que no hay mejor manera de invertir que hacerlo en la formación de tecnologías punteras. Si dispones de créditos de formación y quieres destinarlos a una formación de calidad, podemos informarte sobre ello

Tecnología innovadora

Nuestro objetivo es transferir todo el conocimiento adquirido durante nuestros desarrollos para poder ofrecer la formación de más calidad. Por ello, todos nuestros profesores son desarrolladores que trabajan en proyectos tecnológicos de relevancia nacional e internacional.

Cursos personalizados

Ofrecemos cursos adaptados a las necesidades de su empresa, contando siempre con los temarios más actualizados en las últimas tecnologías. Somos los primeros que actualizamos temario y dedicamos una buena parte de nuestro tiempo a investigar los avances tecnológicos del mercado.

Consultoría

Nuestros cursos a empresas incluyen, además, 5 horas de consultoría online durante las dos semanas siguientes al curso; en ellas se resolverán todo tipo de dudas y se orientarán a los trabajadores en los procesos de desarrollo. Nuestro objetivo es conseguir un aprendizaje óptimo. Obtén más información de nuestra empresa en el perfil de Linkedin de Imagina Group.

Nuestros clientes

A lo largo de los últimos años han sido muchas las empresas que han apostado por formar a sus trabajadores en nuevas tecnologías, y que han confiado en Imagina Formación para llevar a cabo estas formaciones.

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

¿Buscas cursos bonificados? ¿Conoces qué es la Fundación Tripartita? Si eres trabajador tus cursos están subvencionados. 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.

Otros clientes que están aprendiendo con nosotros…

Listado de Clientes

Uso de cookies: Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies

ACEPTAR
Aviso de cookies