项目背景

在快节奏的工作和生活中，有效的任务管理对于提高效率至关重要。Vue.js，作为一个流行的前端框架，以其简洁易用和强大的功能，成为了构建待办事项应用的理想选择。本文将深入探讨如何使用Vue.js构建一个高效的任务管理应用，帮助用户轻松记录、管理日常任务。

技术选型

为了构建这个待办事项应用，我们将采用以下技术：

  • Vue.js 3：作为前端框架，Vue.js 3提供了响应式系统、组件化和组合式API等特性，使我们能够高效地构建用户界面。
  • Vue CLI：用于快速搭建Vue项目，提供了一套完整的工具链，包括开发服务器、构建工具等。
  • LocalStorage：用于在本地存储任务数据，确保用户刷新页面后数据不会丢失。

项目结构

vue-todo-app
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── App.vue
│   │   └── TodoList.vue
│   ├── main.js
│   └── package.json

搭建项目

首先，我们使用Vue CLI创建一个新的Vue项目：

vue create vue-todo-app

选择默认的Vue 3模板，然后进入项目目录并启动开发服务器：

cd vue-todo-app
npm run serve

核心功能实现

添加待办事项

在TodoList.vue组件中，我们使用v-model指令绑定输入框的值到newTodo变量。当用户按下回车键时，触发addTodo方法，将新的待办事项添加到todos数组中。

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
    <button @click="addTodo">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: JSON.parse(localStorage.getItem('todos')) || []
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push({
          id: Date.now(),
          content: this.newTodo,
          completed: false
        });
        localStorage.setItem('todos', JSON.stringify(this.todos));
        this.newTodo = '';
      }
    }
  }
};
</script>

标记任务为完成

在TodoList.vue组件中，我们为每个待办事项添加一个复选框，并使用completed属性来跟踪任务是否完成。当用户勾选复选框时，completed属性会更新，并同步到LocalStorage。

<div v-for="todo in todos" :key="todo.id">
  <input type="checkbox" v-model="todo.completed" />
  <span :class="{ 'completed': todo.completed }">{{ todo.content }}</span>
</div>

删除任务

在TodoList.vue组件中，我们为每个待办事项添加一个删除按钮。当用户点击删除按钮时，removeTodo方法会被触发，从todos数组中移除相应的待办事项，并更新LocalStorage。

methods: {
  removeTodo(id) {
    this.todos = this.todos.filter(todo => todo.id !== id);
    localStorage.setItem('todos', JSON.stringify(this.todos));
  }
}

基于本地存储保存任务状态

为了确保用户刷新页面后任务数据不会丢失，我们在组件的mounted钩子中从LocalStorage读取任务数据，并将其赋值给todos数组。

mounted() {
  this.todos = JSON.parse(localStorage.getItem('todos')) || [];
}

总结

通过以上步骤，我们使用Vue.js构建了一个简单的待办事项应用，实现了添加、标记完成和删除任务等功能。这个应用利用了Vue.js的响应式系统和组件化特性，使得代码结构清晰，易于维护和扩展。通过将任务数据保存在LocalStorage中，我们还确保了用户数据的安全性和持久性。