Ejercicio de programación con Vuejs: Lista de tareas básica en Vuejs

Proyecto
Puntuación
1h 0m

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.

  1. 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.
  2. 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.
  3. Diseña el modelo de datos: define una interfaz en TypeScript para representar una tarea.
  4. 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".
  5. 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.
  6. Implementa la funcionalidad para marcar tareas como completadas:
    • Añade un método que cambie el estado de completada al hacer clic en el botón correspondiente.
    • Aplica estilos condicionales para diferenciar las tareas completadas (por ejemplo, texto tachado).
  7. Implementa la funcionalidad para eliminar tareas:
    • Añade un método que elimine la tarea seleccionada del listado.
  8. 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).
  9. Organiza el código en componentes:
    • Divide tu aplicación en componentes como ListaTareas.vue y Tarea.vue.
  10. 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.
Empezar ejercicio de programación

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

Vue.js
Código

Estilización de componentes en Vue.js

Vue.js
Código

Comunicación de componentes con props

Vue.js
Código

Uso de hooks de ciclo de vida en Vue

Vue.js
Código

Introducción a los componentes

Vue.js
Test

Introducción a Vue

Vue.js
Test

Navegación programática y redirección

Vue.js
Puzzle

Uso de la directiva v-if en Vuejs

Vue.js
Puzzle

Crear componente Composition API

Vue.js
Código

Realizar una solicitud GET con Fetch API en Vue

Vue.js
Código

Uso avanzado de los composables

Vue.js
Puzzle

Galería de imágenes con navegación y rutas

Vue.js
Proyecto

Uso de rutas anidadas y dinámicas

Vue.js
Test

Definición y manejo de rutas en Vue

Vue.js
Código

Uso de la directiva v-for en Vuejs

Vue.js
Código

Manejo de eventos con v-on

Vue.js
Puzzle

Crear un componente con Options API en Vue

Vue.js
Código

Creación de rutas con Vue Router

Vue.js
Código

Uso básico de los composables

Vue.js
Test

Binding bidireccional con v-model y defineModel

Vue.js
Test

Certificados de superación de Vuejs

Supera todos los retos de Vuejs y obtén certificados de superación para mejorar tu currículum y empleabilidad.

Frontend con Vuejs

Frontend con Vuejs

30h 0m

Tecnologías de este ejercicio de programación

Vue.js

Vuejs

Entornos de desarrollo para este ejercicio

Image

Visual Studio Code

Image

GitHub