Construir un administrador de tareas con Vue.js

Introducción

En este proyecto, aprenderás a crear una aplicación simple de administrador de tareas utilizando Vue.js. El administrador de tareas te permite crear, eliminar y controlar tus tareas diarias, ayudándote a convertirte en un maestro de la gestión del tiempo.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el entorno de Vue.js
• Cómo mostrar "Sin datos" por defecto cuando se carga la página
• Cómo agregar tareas a la lista de tareas
• Cómo eliminar tareas de la lista de tareas
• Cómo mostrar el número total de tareas
• Cómo limpiar la lista completa de tareas

🏆 Logros

Después de completar este proyecto, podrás:

• Crear una aplicación de Vue.js desde cero
• Utilizar directivas y enlace de datos de Vue.js
• Implementar la funcionalidad básica de CRUD (Crear, Leer, Actualizar, Eliminar)
• Manejar interacciones de usuario y actualizar la interfaz de usuario en consecuencia

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── css
│   └── style.css ## Archivo de estilo de la página
├── img
│   └── icon.png ## Iconos pequeños requeridos por la página
├── js
│    └── vue.js ## Versión 2.x del framework Vue.js
└── index.html ## Archivo de codificación de diseño y lógica de la página

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

La actual visualización es solo un diseño estático y no implementa funciones específicas.

Mostrar 'No hay datos' por defecto

En este paso, mostrarás "Sin datos" por defecto cuando se carga la página.

1. En el archivo index.html, agrega el objeto data de la instancia de Vue debajo de el: "#box", de modo que contenga una matriz todoList:

data: {
  todoList: [],
}

2. En la estructura HTML, elimina todo el código de <ul class="list"></ul>. Luego agrega un renderizado condicional para mostrar "Sin datos" si la matriz todoList está vacía:

<ul class="list">
  <li v-if="!todoList.length">Sin datos</li>
  <!-- TODO: Agregar elementos de la lista de tareas aquí -->
</ul>

3. Guarda el archivo index.html y actualiza la página. Deberías ver el mensaje "Sin datos" mostrado. El efecto final de la implementación es el siguiente:

Agregar tareas a la lista

En este paso, agregaras tareas a la lista de tareas.

1. En el archivo index.html, agrega un campo de entrada y un botón "Confirmar" a la estructura HTML:

<div class="input">
  <span>contenido</span>
  <input type="text" v-model="search" placeholder="Ingrese lo que va a hacer" />
  <span id="add" @click="addTodo">Confirmar</span>
</div>

2. En la instancia de Vue, agrega una propiedad de datos search y un método addTodo:

data: {
  todoList: [],
  search: ""
},
methods: {
  addTodo() {
    this.todoList.push(this.search);
    this.search = "";
  },
}

3. Guarda el archivo index.html y actualiza la página. Deberías poder ingresar texto en el campo de entrada y hacer clic en el botón "Confirmar" para agregar una nueva tarea a la lista. El efecto final de la implementación es el siguiente:

Eliminar tareas de la lista

En este paso, agregaras la funcionalidad para eliminar tareas de la lista de tareas.

1. En el archivo index.html, agrega un icono "Eliminar" a cada elemento de tarea:

<li v-if="!todoList.length">Sin datos</li>
<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- Número de serie anterior -->
  <span class="number">{{index + 1}}</span>
  <!-- Contenido de la lista -->
  <span>{{todo}}</span>
  <!-- Botón de eliminación -->
  <span class="delete" @click="deleteTodo(index)"></span>
</li>

2. En la instancia de Vue, agrega un método deleteTodo:

methods: {
  //...
  deleteTodo(index) {
    this.todoList.splice(index, 1);
  },
}

3. Guarda el archivo index.html y actualiza la página. Deberías poder hacer clic en el icono "Eliminar" para eliminar una tarea de la lista. El efecto final de la implementación es el siguiente:

Mostrar el número total de tareas

En este paso, mostrarás el número total de tareas en la lista de tareas.

1. En la estructura HTML, agrega una sección "Total" al final de la lista de tareas:

<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!--... -->
</li>
<li v-if="todoList.length">
  <b> Total: {{todoList.length}} </b>
  <!--... -->
</li>

2. Guarda el archivo index.html y actualiza la página. Deberías ver el número total de tareas mostrado al final de la lista.

Limpiar la lista de tareas

En este paso, agregaras la funcionalidad para limpiar toda la lista de tareas.

1. En la instancia de Vue, agrega un método clear:

methods: {
  //...
  clear() {
    this.todoList = [];
    this.search = "";
  }
}

2. En la estructura HTML, agrega un botón "Limpiar" en la sección "Total":

<!--... -->
<li v-if="todoList.length">
  <b> Total: {{todoList.length}} </b>
  <b id="clear" @click="clear">Limpiar</b>
</li>

3. Guarda el archivo index.html y actualiza la página. Deberías poder hacer clic en el botón "Limpiar" para eliminar todas las tareas de la lista.

Felicitaciones ¡Has completado el proyecto de Maestro de Gestion del Tiempo utilizando Vue.js. El efecto final de la implementación es el siguiente:

Resumen

Felicitaciones ¡Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.