Vue JS (2 y 3) - Crea Aplicaciones Web Modernas con Vue

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

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

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

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.

Ejemplo donde utilizamos valores numéricos y booleanos.

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

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

Revisamos el data-binding pero ahora utilizando Vue.

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

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

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

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

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

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

Conocemo sobre el objeto Methods de Vue.

Evitar el doble renderizado con la directiva v-once.

Renderizado de código o salida HTML.

Explicamos el uso de la directiva v-show.

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

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

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

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

Breve introducción a los filtros, propiedades computadas y observables en Vue JS.

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

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

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

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

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

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

Aprendemos como instanciar la nueva versión de Vue JS 3.

Explicamos sobre la primera app creada con Vue 3.

Explicamos la interactividad de la app con los usuarios por medio de los métodos.

Revisamos dos directivas más, v-if y v-else.

Revisamos de forma rápida la directiva v-for.

Explicamos sobre las propiedades computada y su diferencia con los métodos.

Vemos como simplificar directivas.

Explicamos como Vue valida la entrada de datos.

Explicamos el uso de la directiva v-model.

Creamos nuestro primer y sencillo componente.

Vemos cómo se comunican los componentes utilizando props.

Agregamos métodos a un componente.

Explicamos la comunicación entre componentes, de hijo a padre.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Explicamos la instalación de Node.

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

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

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

Explicamos Vue UI para crear proyectos con la GUI de Vue CLI.

Explicamos que es un Single File Component

Entender los estilos en los componentes.

Creando nuestro componente Button

Seguimos personalizando nuestro componente Button.

Creamos nuestro componente input.

Realizamos una validación dinámica en los inputs.

Estado del formulario, por medio de una comunicación bidireccional de componentes.

Validamos el formulario en el componente padre.

Finalizamos el formulario.

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

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

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

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

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

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

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

Explicamos sobre los componente en linea.

Explicamos el método data en un componente.

En esta lección explicamos el anideamiento de componentes.

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

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

Explicamos como funciona un Single Vue File Component.

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

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

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

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

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

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

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

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

Explicamos que son los componentes globales y locales.

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