En esta lección comenzaremos con el desarrollo de nuestra primera aplicación con Vue.js. Será una aplicación en apariencia sencilla pero que te permitirá repasar los conceptos que has aprendido hasta ahora (como uso de métodos, directivas y eventos) y aprender aún más sobre cómo crear un CRUD con Vue.js y manipular datos dentro de un listado.
Notas
Cada tarea va a tener las siguientes propiedades:
- Descripción (texto)
- Estado (pendiente o completada)
- Estado de edición (normal o en edición).
En nuestra aplicación tenemos diferentes acciones representadas por iconos:
- El icono cuadrado a la izquierda de la descripción de la tarea nos permitirá marcar dicha tarea como completada.
- Si la tarea está como completada, dicho icono cambiará visualmente y al presionarlo nuevamente podemos marcar la tarea como no completada.
- El icono del lápiz nos va a permitir editar la tarea
- Mientras que el de la papelera nos va a permitir eliminarla.
- Cuando presionemos el icono de editar, este icono junto con el de la papelera cambiarán y nos permitirán confirmar la actualización de la tarea o cancelar los cambios.
Estas acciones nos permitirán completar un CRUD con un par de detalles adicionales, así que por favor acompáñanos en las 4 lecciones siguientes para terminar esta pequeña aplicación.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Diferencias entre métodos, computed properties y filtros en Vue.js 2 Lección siguiente Listado dinámico con Vue.js 2