Cómo crear un formulario y lista con reactividad en Vue 3 | Curso de Vue.js 3 - 04

Sobre esta lección

En este cuarto video, aprenderás a crear un componente de lista de tareas en Vue.js 3 y cómo importarlo en tu archivo App.vue principal. Te mostraré en detalle el funcionamiento de v-model y cómo utilizarlo en tu lista de tareas para lograr una experiencia de usuario fluida e interactiva. Además, crearemos una función para agregar tareas de forma reactiva, para que tu lista se actualice automáticamente. También exploraremos v-for, una directiva poderosa para iterar sobre elementos en Vue.js 3. ¡No te pierdas este video lleno de prácticos ejercicios para mejorar tus habilidades en Vue.js 3 00:00 Borrar componentes autogenerados y modificar la configuración de vue-router 02:19 Cómo crear un nuevo componente en vue e importarlo a la app principal 05:13 Cómo crear variables reactivas con ref en un componente vue 06:03 Explicación: ¿Qué es y cómo funciona la directiva "v-model"? 07:16 Cómo crear una función para agregar elementos a un arreglo en vuejs 08:41 Agregar la directiva "keyup" para ejecutar funciones al presionar enter 09:21 Cómo utilizar la directiva "v-for" para crear una lista de elementos en vue 3 10:25 Explicación: ¿Qué es y para qué sirve la directiva "key"? 11:11 Probando la lista creada en el navegador web Página oficial de la documentación de Vue 3: https://vuejs.org Herramientas que ocupamos en este curso: Visual Studio Code: https://code.visualstudio.com/ + Instalar la extensión oficial de Vue (la puedes buscar como VOLAR) Sourcetree: https://www.sourcetreeapp.com/ | Esta herramienta nos permite utilizar GIT sin comandos. En google Chrome instala la extensión oficial de Vue.js 3, llamada vue.js devtools ¡No te pierdas esta oportunidad de dominar Vue.js 3 de manera clara y efectiva! Más adelante, crearemos un panel de administración añadiendo CSS y el framework Bootstrap 5, creando vistas para CRUDs, utilizando Pinia, Vue Router, y otras dependencias como Vee-Validate y Yup, junto con la utilización de llaves de accesos y tokens de autenticación entre el frontend y backend para iniciar sesión con un usuario. Para más contenido como este, tutoriales de Vue en español u otros frameworks de desarrollo web frontend (como react o angular), dale "Me gusta", comparte el vídeo y suscríbete. Si te sirvió el vídeo o quieres opinar sobre qué deberíamos ver en los siguientes capítulos de este curso de Vue.js 3, deja tu comentario y así todos aprendemos vue en comunidad. ¡Aprende vue GRATIS y fácil! Recuerda que en estos videos estamos ocupando Composition API con Script Setup Para hacer este curso de Vue 3, te recomiendo tener conocimientos nivel medio de JavaScript. #curso #vuejs #vue3