当前位置：首页 > article >正文

使用Vue.js构建待办事项应用：从零到上线

article 2025/1/31 8:14:39

前言

Vue.js 是一个渐进式 JavaScript 框架，旨在构建用户界面。它简洁易用，支持组件化开发，非常适合中小型项目和单页面应用。本文将通过构建一个待办事项应用，展示如何使用 Vue.js 开发前端项目。我们会一步步讲解项目的核心功能，并最终将项目部署上线。

项目背景

待办事项应用是前端开发中常见的练习项目，旨在帮助用户记录和管理日常任务。本项目将实现如下功能：

添加待办事项
标记任务为完成
删除任务
基于本地存储保存任务状态

通过这些功能，初学者可以快速掌握 Vue.js 的基本用法以及如何与浏览器的本地存储交互。

技术选型

Vue.js 3：用于构建用户界面，使用组合式 API（Composition API）进行组件开发。
Vue CLI：用于快速创建 Vue 项目，并进行本地开发与调试。
LocalStorage：用于持久化存储任务，避免页面刷新后数据丢失。

项目结构

vue-todo-app
│
├── public/           # 公共静态资源
├── src/              # 源代码目录
│   ├── components/   # Vue 组件
│   ├── App.vue       # 主应用组件
│   ├── main.js       # 入口文件
│
└── package.json      # 项目信息

搭建项目

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

vue create vue-todo-app

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

cd vue-todo-app
npm run serve

这将启动本地开发服务器，并在浏览器中打开 localhost:8080，你将看到一个基本的 Vue 项目框架。

核心代码

任务列表组件

我们首先创建一个 TodoList 组件，用于展示待办事项列表。该组件负责显示任务，并允许用户标记任务为完成或删除任务。

<!-- src/components/TodoList.vue -->
<template>
  <div class="todo-list">
    <h2>My To-Do List</h2>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="toggleComplete(index)">✔</button>
        <button @click="removeTask(index)">✖</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    todos: Array
  },
  methods: {
    toggleComplete(index) {
      this.$emit('toggle-complete', index);
    },
    removeTask(index) {
      this.$emit('remove-task', index);
    }
  }
};
</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
</style>

添加任务组件

接下来，我们创建一个 AddTask 组件，用户可以通过该组件添加新的待办事项。

<!-- src/components/AddTask.vue -->
<template>
  <div class="add-task">
    <input v-model="newTask" @keyup.enter="addTask" placeholder="What do you need to do?" />
    <button @click="addTask">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: ''
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.$emit('add-task', this.newTask);
        this.newTask = '';
      }
    }
  }
};
</script>

<style scoped>
.add-task {
  margin-bottom: 20px;
}
</style>

组合组件与逻辑

在 App.vue 中，我们将 TodoList 和 AddTask 组件组合在一起，并实现添加任务、标记任务完成和删除任务的逻辑。同时，我们使用 LocalStorage 来存储任务列表。

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>Vue To-Do List</h1>
    <AddTask @add-task="addTask" />
    <TodoList :todos="todos" @toggle-complete="toggleComplete" @remove-task="removeTask" />
  </div>
</template>

<script>
import AddTask from './components/AddTask.vue';
import TodoList from './components/TodoList.vue';

export default {
  components: {
    AddTask,
    TodoList
  },
  data() {
    return {
      todos: []
    };
  },
  methods: {
    addTask(task) {
      this.todos.push({ text: task, completed: false });
      this.saveTodos();
    },
    toggleComplete(index) {
      this.todos[index].completed = !this.todos[index].completed;
      this.saveTodos();
    },
    removeTask(index) {
      this.todos.splice(index, 1);
      this.saveTodos();
    },
    saveTodos() {
      localStorage.setItem('todos', JSON.stringify(this.todos));
    },
    loadTodos() {
      const savedTodos = localStorage.getItem('todos');
      if (savedTodos) {
        this.todos = JSON.parse(savedTodos);
      }
    }
  },
  mounted() {
    this.loadTodos();
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}
</style>

说明

App.vue 是主应用组件，负责将所有逻辑和组件结合在一起。
AddTask 组件用于添加新任务，当用户点击按钮或按下回车时，新的任务将通过事件传递给父组件 App.vue。
TodoList 组件负责显示任务列表，并且可以通过事件触发标记任务完成或删除任务。

本地存储功能

通过 LocalStorage 我们可以将任务持久化保存。当用户刷新页面时，任务不会丢失。

saveTodos() {
  localStorage.setItem('todos', JSON.stringify(this.todos));
},
loadTodos() {
  const savedTodos = localStorage.getItem('todos');
  if (savedTodos) {
    this.todos = JSON.parse(savedTodos);
  }
}

saveTodos 方法在任务列表发生变化时被调用，将当前任务列表保存到 LocalStorage 中。loadTodos 方法则在应用加载时读取并恢复任务列表。