Vue JS - Aprende a Crear Aplicaciones Web Modernas con Vue
4.4 (779 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
28,575 students enrolled

Vue JS - Aprende a Crear Aplicaciones Web Modernas con Vue

Todo lo que debes saber de Vue JS, Data Bindings, Directivas, Vue-CLI, Componentes, Formularios, Vue-Router y Vuex
4.4 (779 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
28,575 students enrolled
Created by Grover Vásquez
Last updated 3/2020
Spanish
Spanish [Auto]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11 hours on-demand video
  • 13 articles
  • 11 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Saber ¿Qué es Vue JS?, para que sirve y como puedes empezar.
  • Operaciones básicas del entorno de trabajo con Vue JS para crear aplicaciones.
  • Aprende todas las Directivas de Vue y pónlas en práctica.
  • Crear Componentes Web y aprende como utilizarlos en tu aplicación web.
  • Utilizar Filtros para manejar cadenas o textos, fechas y monedas.
  • Utilizar Vue DevTools y monitorea en tiempo real los resultados de tu App.
  • Aprende a utilizar Vue CLI para crear tus proyectos más amigables.
  • Integrar BootStrap en tu proyecto con Vue.
  • Rutas en Vue JS con Vue-Router.
  • Manejo de estados de tu aplicación con Vuex
Course content
Expand all 149 lectures 11:09:37
+ Introducción a Vue JS
7 lectures 28:22

Introducción a la primera sección del curso de Vue.js.

Preview 00:39

Introducción sobre el concepto de Vue.JS y el problema que soluciona en las aplicaciones modernas.

Preview 08:05
¿Cómo hacer preguntas?
00:34

Temario del curso.

Silabo/Temario del curso
00:02

Vamos a conocer todo el ecosistema que nos trae Vue.js.

Ecosistema Vue
08:13

Indicamos los softwares o programas necesarios para llevar el curso.

Software a utilizar
04:30

Vamos a indicar que extensiones necesitamos instalar a VS Code para empezar a trabajar con Vue.js.

Preview 06:18
+ Conociendo Vue JS
23 lectures 01:37:06

Instroducción a la sección de conociendo Vue.js

Preview 00:48

Explicamos un ejemplo sencillo de como se crea la instancia de Vue y el alcance del mismo.

La instancia de Vue.js parte 1
03:24
La instancia de Vue.js parte 2
00:13

Empezamos con VueJS y como es costumbre realizando nuestro Hola Mundo.

Preview 09:40

Un ejemplo sencillo en donde explicamos el uso de funciones de JavaScript con Vue.JS, para ello realizamos un ejemplo sencillo de interpolación de cadenas.

Interpolación de Strings
03:42

Ejemplo donde utilizamos valores numéricos y booleanos.

Números y Booleans
03:21

En esta lección explicamos una breve introducción a las Directivas en Vue.js.

Las Directivas
05:35

Una breve pero concisa introducción al data-binding, en este caso utilizando javascript.

Data Binding parte 1
05:36

Revisamos el data-binding pero ahora utilizando Vue.

Data Binding parte 2
05:01

Explicamos como aplicar el data-binding cuando tenemos que asignarle un valor a un atributo de una etiqueta html en la vista.

Data Binding parte 3
04:19

Breve resumen de lo que significa el Binding o Uniones en Vue.js.

Explicación de los Bindings
01:47

Ahora vamos a explicar como podemos aplicar el data-binding de doble vía en Vue.

Data Binding de doble vía ó bidireccional (Two-Way)
06:33

Ahora vamos a ver como utilizar la Directiva v-for en Vue.JS.

Creando una lista utilizando la directiva v-for
04:28

Vamos a ver como podemos listar los elementos de un arreglo utilizando la notación de índices.

Matriz con notación de Índice
03:56

Modificamos el ejemplo anterior, pero ahora vamos a cambiar lo datos del arreglo por objetos y como los manejamos con Vue.

Listando objetos
02:41

Conocemo sobre el objeto Methods de Vue.

El objeto methods
04:05

Evitar el doble renderizado con la directiva v-once.

Uso de v-once para evitar el doble rendering
03:55

Renderizado de código o salida HTML.

Uso de la directiva v-html
03:54

Explicamos el uso de la directiva v-show.

Directiva v-show
05:35

En esta lección hablamos sobre la directiva v-if y su diferencia con v-show

Directiva v-if
04:21

Explicamos como es la escucha de eventos en Vue.js.

Escuchando eventos
07:05

Vemos como podemos capturar los datos de los eventos con Vue.js.

Obtener datos de los eventos
04:19

Explicamos como pasamos parámetros o argumentos a un método.

Pasar parámetros a los métodos
02:48

En este examen, vamos a poner a prueba los conocimientos sobre el Data-Binding con Vue.js

Prueba Fundamentos de Vue.js
4 questions
+ Filtros, Propiedades Computadas y Observadores en VueJS
10 lectures 49:23

En esta lección vemos como aplicar un filtro del tipo capitalize a un texto.

Preview 06:46
Formateo de texto utilizando ES
03:11
Recurso para formateo de monedas
00:12

Explicamos la aplicación de filtros para monedas, valiendonos de una librería externa.

Formateando monedas con filtros
08:56
Recurso para formateo de Fechas
00:07

En esta lección explicamos el uso de filtros para dar formato a una fecha.

Formateando fechas con filtros
04:38

Explicamos el funcionamiento de las propieades computadas o calculadas en Vue.js.

Propiedad Computada o calculada
08:44

En esta lección vamos a explica un ejemplo de aplicación de como ordenar una lista con una propiedad computada.

Ordenar lista con propiedad computada
07:31

En esta lección explicamos el uso de observabler en Vue.js.

Observables
08:26
Prueba de filtros, propiedades computadas y observadores.
1 question
+ [App 01] - Listado de compras
15 lectures 01:04:58

Introducción a la sección en donde creamos un listado de comprar von Vue.js

Preview 00:33

Empezamos a crear nuestro primer proyecto con Vue.js, en donde vamos integrar vue en el proyecto.

Iniciando Vue
08:13

Aplicamos de forma sencilla la integración del Framework CSS BootStrap a nuestra App.

Integrar Bootstrap 4
02:26

Revisamos un poco la sintaxis de Vue y agregamos la extensión Vue-DevTool a Google Chrome.

Expresiones, Sintaxis y Vue-DevTools
06:22

Ahora vamos a ingresar una lista de útiles por defecto a nuestra App con Vue.

Creando la lista de compras
02:45

Revisamos como se aplica la reactividad de Vue en la consola y con Vue DevTools

Reactividad en la Lista
04:48

Aprendemos como agregar un elemento a la lista utilizando eventos del usuario.

Agregar un elemento a la lista
05:17

Sintaxis reducidad de la directiva V-On, además creamos un método para agregar un elemento a la lista.

Agregar método y sintaxis reducida de v-on
02:48

Vemos como podemos probar nuestros métodos desde la consola.

Test del método con Vue-DevTools
03:47

En esta lección revisamos como podemos mostrar contenido en nestro sitio con condicionales.

Representación condicional
08:39

Ahora vamos a hacer que nuestra lista no tenga elementos vacíos.

Evitar elementos vacíos en la lista
04:30

Ahora vamos a convertir los elementos de la lista, de texto a simple a objetos, para un mejor manejo.

Elementos de la lista como objetos
02:35

Agregamos la clase css a cada elemento de la lista de forma dinámica, utilizando Vue.js.

Agegar clase CSS dinámica
07:02

en esta lección finalizamos la lista con una propieda computada que nos permite listar los elementos de forma reversa.

Ordenar la lista de forma reversa
05:11
Código de la sección
00:02
+ Vue CLI y WebPack
6 lectures 23:46

Introducción a Vue-CLI y al uso de plantillas para crear proyectos sobre Vue.

Preview 00:49

Empezamos instalando Vue-CLI para empezar a crear nuestros proyectos a partir de ahora.

Instalar Vue CLI
04:48

Explicamos los pasos para crear nuestro proyecto von Vue-CLI.

Creando un proyecto con Vue CLI
04:38

En esta lección explicamos la estructura de un proyecto creado con Vue-CLI.

Estructura del proyecto
05:07

Explicamos que son los archivos Vue, y que lo conforman.

Conociendo los archivos .vue
05:33

En esta lección rápida, vemos como crear el proyecto para que sea ditribuible para producción.

Compilando el proyecto para producción
02:51
+ [App 02] - Gestión de notas
8 lectures 25:47

Introducción a la sección e crear una app de gestión de notas con vue.js

Preview 00:31

Revisamos una vista rápida de la App a desarrollar.

Vista previa de la App
01:25

Preparamos el proyecto con los estilos principales para el sitio web.

Ajustes iniciales
03:48
Enlazando formulario con el modelo
05:08
Registrando notas
05:12

En esta lección vamos a listar las notas que tenemos en el arreglo del modelo.

Listando las notas
05:46

En esta lección creamos el método que nos va permitir eliminar una nota.

Eliminar elemento de la lista
03:55
Código de la sección.
00:02
+ Componentes en Vue [App 03] Gestión de Posts
12 lectures 01:02:39

Una breve pero precisa instroducción a los componentes con Vue.js

Preview 08:48

Utilizamos la instrucción Vue.extend para extender la funcionalidad de los componentes.

Extendiendo los componentes
04:32

Explicamos sobre los componente en linea.

Componente en línea
03:10

Explicamos el método data en un componente.

El método data
03:20

En esta lección explicamos el anideamiento de componentes.

Anidando componentes
07:56

En esta lección explicamos la estructura de un componente del tipo Vue.

Estructura de un componente Vue
07:19

En esta lección  vemos como crear nuesro primer componente Vue, y como podemos utilizarlo.

Creando primer componente Vue
04:51
Otras formas de llamar un componente Vue
02:01

Explicamos como funciona un Single Vue File Component.

Uitilizando Single Vue File Component
09:08

Explicamos el componente Root o componente principal de nuestra App con Vue.js

El Componente Root
03:31

Vamos  a agregar más componentes de nuestra App, en este caso los componentes Header y Footer.

Agregando más componentes
08:00
Código de la sección
00:03
+ Vue CLI 3
7 lectures 24:20

Introducción a la sección de VUE CLI 3.

Preview 01:08

En está lección vamos a ver como integramos VUE CLI 3 en nuestro sistema, y que requisitos debemos cumplir para instalarlo.

Instalación de VUE CLI 3
06:41

En esta lección explicamos el proceso de instalar VUE Cli en un Sistema OSX.

Instalar VUE CLI en OSX
03:16

Vemos como crear nuestro primero proyecto utilizando VUE-CLI 3.

Creando un proyecto
04:50

En esta lección explicamos como crear un proyecto utilizando vue ui, la interfaz gráfica de vue-cli 3.

Creando un proyecto con VUE UI
06:12

Explicamos como crear un proyecto de Que utilizando la interfaz gráfica de Que CLI 3.

Iniciando el proyecto desde la UI
02:11
Código de la sección.
00:02
+ Comunicación entre componentes
8 lectures 53:06

Introducción a la sección de comunicación entre componentes.

Preview 01:30

Creamos el proyecto para la sección de comunicación de componentes en Vue JS.

Creando el proyecto
05:09

Explicamos como cada componente que creamos en Vue JS es independiente entre componentes similares.

Independencia de componentes
07:57

Explicamos como un componente padre se comunica con un componente hijo en Vue JS.

Comunicar componente padre a hijo usando props
12:44

Hacemos un cambio para simplificar aún mas nuestros componentes.

Simplificando los componentes
05:14

Hacemos un cambio en relación a anidar componentes en nuestra App.

Componente anidado (Nested component)
05:32

Explicamos que son los componentes globales y locales.

Componentes globales y locales
02:43

Ahora vamos a explicar el proceso de comunicación entre un componente hijo con un componente padre.

Comunicar componente hijo a padre utilizando eventos.
12:17
+ [App 4] Carrito de compras
10 lectures 56:39

Introducción a la sección, se explica la app a desarrollar y que involucra este desarrollo.

Introducción
00:42

Creamos el proyecto y explicamos algunos detalles sobre el uso de recursos.

Alistando el proyecto
05:42

Creamos el componento Producto de la aplicación.

Creando el componente Producto
07:48

Listamos los productos desde el archivo de datos.

Mostrando los productos
07:06

Creamos nuestro componente carrito.

Creando el componente carrito
03:25

Agregamos productos al carrito.

Agregando productos al carrito
08:18

Ahora creamo la función de desahbilitar el botón de agregar producto, una vez que el producto ya fue agregado.

Desactivar el botón de agregar al carrito
07:52

Eliminamos el producto del carrito de compras.

Eliminar productos del carrito
06:35

Finalizamos el carrito con el total del pago, y la simulación del mismo.

Mostrar el total a pagar
09:09
Código de la sección
00:02
Requirements
  • Contar con una PC con Windows, Linux o una Mac
  • Conocimientos básicos de HTML y JavaScript
  • Muchas ganas de aprender
Description

¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡ MÁS de 25000 ESTUDIANTES !!!!!!!!!!!!!!!!

Vue JS, es uno de los Frameworks de desarrollo web muy utilizado en la actualidad, con el vas a poder crear sitios web modernos que cubran todas las necesidades que un desarrollador web pueda imaginar.

Bienvenido a nuestro curso de Vue JS en su versión 2, también llamado VueJS 2, este curso esta orientado para que lo empieces desde cero, vamos a empezar a conocer Vue JS desde sus conceptos básicos, hasta empezar a crear pequeñas pero funcionales aplicaciones, en donde podrás notar la funcionalidad que puedes conseguir con este poderoso Framework.

No importa donde lo búsques (Google, GitHub, Tendencias) ni como lo mires, Vue JS se está convirtiendo rápidamente en la estrella del desarrollo web utilizando un Framework de JavaScript.

El desarrollo reactivo se está volviendo muy popular, ya que brindan una mejor experiencia a los usuarios, y esto lo vemos en el desarrollo de aplicaciones móviles, pero hoy en día gracias a los Frameworks o marcos de trabajao desarrollados, en JavaScript, podemos llevar esa reactividad a los navegadores. VueJS ya es tendencia y como tal se requiere cada día de personas con este conocimiento.

Estoy seguro que muchos conocen o escucharon hablar de Angular o ReactJS, ambos muy buenos y con sus características propias que hacen que el desarrollo web sea como un juego, VueJS une o combina la mejor de ambos Frameworks, y hace que el desarrollo de aplicaciones web de todo nivel sea aún más divertido y funcional. Y si no escuchaste de los dos Frameworks o tampoco conoces algo de ellos, no te preocupes, que no necesitas de esos conocimientos para aprender VueJS, lo iremos aprendiendo durante el desarrollo del curso.

Lo que vas a aprender en el curso:

  • ¿Qués es Vue JS y porqué deberías utilizarlo?

  • Crear tu entorno de trabajo para empezar con VueJS.

  • Todos los tipos de Uniones o Datan Bindings.

  • Uso de las diferentes Directivas de Vue JS.

  • Uso de los Filtros.

  • Creación de Componentes Web.

  • Como implementar tu aplicación en producción.

  • Comunicación entre componentes.

  • Varias Apps, incluyendo carrito de compras.

  • Integrar Bootstrap a tus proyectos con Vue.

  • Vue CLI 3.

  • Vue Router o rutas en Vue JS.

  • Fomularios con Vue JS.

  • Validaciones.

  • Manejo de estados de la aplicación con Vuex.

Que dicen algunos de los estudiantes inscritos en el curso:

★★★★★ "Muy buen curso, aunque la sección de "Rutas en Vue JS" lo sentí un poco largo y sin el mismo orden que tenían las secciones anteriores. Pero no quiere decir que es algo negativo o malo, solo que a mi percepción no siguió la misma línea de las otras secciones.", Humberto

★★★★★ "Le doy 5 estrellas todo bien exelente profesor y lecciones mas que claras con ejemplos y pequeños proyectos.", Roy

★★★★★ "Todo muy bien explicado, sabe de lo que habla, excelente introducción de Vue.JS, cubrió todos los aspectos importantes de Vue.js.", Jesús Rosas

★★★★★ "El curso es excelente y está muy bien estructurado hasta los momentos Felicito al profesor.", Will

★★★★★ "El profesor posee una excelente capacidad comunicativa. Totalmente recomendable. Muchas gracias por tomarse el tiempo de compartir conocimientos.", Carlos

...

En cada una de las secciones te acompañaran pequeños ejercicios, y evaluaciones para reforzar tus conocimientos, nuestra misión es que no solo veas código, sino que también lo practiques.

Para firnalizar recuerda que todos nuestros cursos tienen actualizaciones periódicas, eso garantiza que siempre tendrás un curso actualizado, también no olvides que tienes la garantía de devolución de tu dinero por parte de UDEMY. Espero verte dentro.

Who this course is for:
  • Personas que deseasn aprender desarrollo web Front-End.
  • Personas que desean aprender a crear web modernas.
  • Desarrolladores web que quieran empezar a utilizar un Framework en sus desarrollo.
  • Estudiantes de informática que tengan inclinación de aprender sobre desarrollo web.
  • Cualquier personas que quiera conocer y aprender sobre Vue JS.