Ejercicio de programación con Vuejs: Implementar reactividad con ref y reactive
0h 25m
Vuejs: ejercicio código que implementa un sistema reactivo de gestión de tareas con ref y reactive que mejora tus habilidades en reactividad y manejo de estados.
El ejercicio de programación propuesto se centra en la implementación de un sistema reactivo dentro de la arquitectura de Vue.js, utilizando las funciones ref
y reactive
. Este ejercicio te permitirá adquirir experiencia práctica en la gestión de estado y reactividad en aplicaciones construidas con Vue.js. La actividad consiste en crear una aplicación sencilla pero funcional que permita a los usuarios gestionar una lista de tareas.
Deberás iniciar creando un sistema que permita al usuario añadir tareas nuevas mediante el uso de una variable reactiva para almacenar temporalmente el nombre de la nueva tarea. Además, necesitarás gestionar un array reactivo de tareas, donde cada tarea es un objeto con propiedades de nombre y estado de completado. Este sistema debe facilitar la adición de nuevas tareas, así como el marcado de tareas como completadas o no completadas.
En el desarrollo del reto, se te harán preguntas relativas a la implementación y uso de estos conceptos de reactividad, así como sobre la integración de funciones que gestionen el estado de las tareas. Los ejercicios están diseñados para que pienses en la práctica y apliques los conocimientos sobre reactividad en Vue.js, mejorando así tus habilidades en este popular framework.
Crea un sistema reactivo en Vue.js que permita gestionar una lista de tareas. Cada tarea debe tener un nombre y un estado que indique si está completada o no. Implementa las siguientes funcionalidades:
- Usa
ref
para crear una variable reactiva que almacene el nuevo nombre de la tarea que el usuario desea añadir. - Usa
reactive
para crear un objeto que contenga un array de tareas, donde cada tarea es un objeto con las propiedadesnombre
(de tipo cadena) ycompletada
(de tipo booleano). - Implementa una función que permita añadir una nueva tarea a la lista, utilizando el nombre almacenado en la variable de
ref
. - Implementa una función que permita marcar una tarea como completada o no completada.
- Asegúrate de que cualquier cambio en las tareas se refleje automáticamente en la interfaz de usuario.
Todos los ejercicios de programación de Vuejs
Evalúa tus conocimientos con ejercicios de programación en Vuejs de tipo Test, Puzzle, Código y Proyecto con VSCode.
Solicitud HTTP con Axios
Estilización de componentes en Vue.js
Comunicación de componentes con props
Uso de hooks de ciclo de vida en Vue
Introducción a los componentes
Introducción a Vue
Navegación programática y redirección
Uso de la directiva v-if en Vuejs
Crear componente Composition API
Realizar una solicitud GET con Fetch API en Vue
Uso avanzado de los composables
Galería de imágenes con navegación y rutas
Uso de rutas anidadas y dinámicas
Definición y manejo de rutas en Vue
Uso de la directiva v-for en Vuejs
Manejo de eventos con v-on
Crear un componente con Options API en Vue
Creación de rutas con Vue Router
Uso básico de los composables
Binding bidireccional con v-model y defineModel
Certificados de superación de Vuejs
Supera todos los retos de Vuejs y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Tutorial para resolver este ejercicio de programación
Vuejs
Reactividad con ref y reactive
Composición y reactividad