Ejercicio de programación con Vuejs: Lista de tareas básica en Vuejs
Proyecto
Ejercicios de programación de Vue.js proyecto real: crea una aplicación de lista de tareas utilizando Vue.js, TypeScript, HTML y CSS. Aprende a desarrollar componentes, manejar estados y aplicar estilos para una aplicación web interactiva.
- Configura el proyecto: inicia un nuevo proyecto de Vue.js con TypeScript. Puedes utilizar la herramienta Vue CLI para generar la estructura básica del proyecto.
- Crea el componente principal: en el componente principal de la aplicación (
App.vue), define la estructura básica y establece un contenedor para la lista de tareas. - Diseña el modelo de datos: define una interfaz en TypeScript para representar una tarea.
- Implementa la funcionalidad para agregar tareas:
- Crea un formulario que permita al usuario ingresar el título de una nueva tarea.
- Añade un método que, al enviar el formulario, agregue la nueva tarea al listado con un estado de "no completada".
- Muestra la lista de tareas:
- Utiliza una lista (
<ul>) para renderizar todos los elementos de tareas actuales. - En cada elemento, muestra el título y botones para marcar como completada y eliminar.
- Utiliza una lista (
- Implementa la funcionalidad para marcar tareas como completadas:
- Añade un método que cambie el estado de
completadaal hacer clic en el botón correspondiente. - Aplica estilos condicionales para diferenciar las tareas completadas (por ejemplo, texto tachado).
- Añade un método que cambie el estado de
- Implementa la funcionalidad para eliminar tareas:
- Añade un método que elimine la tarea seleccionada del listado.
- Aplica estilos con CSS:
- Asegúrate de que la aplicación sea visualmente atractiva.
- Utiliza flexbox o grid para organizar los elementos.
- Asegura la adaptabilidad en diferentes dispositivos (diseño responsivo).
- Organiza el código en componentes:
- Divide tu aplicación en componentes como
ListaTareas.vueyTarea.vue.
- Divide tu aplicación en componentes como
- Prueba la aplicación: * Verifica que todas las funcionalidades funcionen correctamente. * Asegúrate de que no haya errores en la consola y que el código esté limpio y bien comentado.
Más ejercicios de programación con Vuejs
Evalúa tus conocimientos en Vuejs con más ejercicios de programación de tipo Test, Puzzle, Código y Proyecto con VSCode.
Solicitud HTTP con Axios
Código
Estilización de componentes en Vue.js
Código
Comunicación de componentes con props
Código
Uso de hooks de ciclo de vida en Vue
Código
Introducción a los componentes
Test
Introducción a Vue
Test
Navegación programática y redirección
Puzzle
Uso de la directiva v-if en Vuejs
Puzzle
Crear componente Composition API
Código
Realizar una solicitud GET con Fetch API en Vue
Código
Uso avanzado de los composables
Puzzle
Galería de imágenes con navegación y rutas
Proyecto
Uso de rutas anidadas y dinámicas
Test
Definición y manejo de rutas en Vue
Código
Uso de la directiva v-for en Vuejs
Código
Manejo de eventos con v-on
Puzzle
Crear un componente con Options API en Vue
Código
Creación de rutas con Vue Router
Código
Uso básico de los composables
Test
Binding bidireccional con v-model y defineModel
Test
Tecnologías de este ejercicio de programación
Entornos de desarrollo para este ejercicio
Visual Studio Code
GitHub