Vue-Todo-list 案例

一、前言

在前端开发中，Todo List（待办事项列表） 是一个非常经典的入门项目。它涵盖了组件化思想、数据绑定、事件处理、本地存储等核心知识点，非常适合用来练习 Vue 的基本用法。

本文将带你一步步实现一个功能完整的 Vue Todo List 应用，包括：

• 添加任务
• 删除任务
• 标记任务完成状态
• 清除已完成任务
• 使用 localStorage 保存数据

通过本案例，你将掌握 Vue 开发的基本流程与常用技巧，为后续开发更复杂的项目打下坚实基础。

二、项目目标

我们要实现一个如下功能的 Todo List：

功能	描述
添加任务	输入内容后点击"添加"按钮或按回车键新增任务
删除任务	点击任务右侧的删除按钮即可移除该任务
完成状态切换	点击任务文本可切换完成状态（划线显示）
显示任务总数	显示当前任务总数
显示未完成数	显示未完成的任务数量
清除已完成任务	可一键清除所有已完成的任务
数据持久化	使用 localStorage 保存数据，刷新页面不丢失

三、技术选型

• Vue 3（支持 Composition API）
• Vue CLI 脚手架初始化项目
• <script setup> 语法糖（更简洁）
• HTML + CSS 布局
• localStorage 实现数据持久化

四、项目结构说明

vue-todo/
├── public/              # 静态资源（不参与构建）
├── src/
│   ├── App.vue          # 根组件
│   ├── main.js          # 入口文件
│   └── components/
│       └── TodoList.vue # 待办事项主组件
├── package.json
└── README.md

五、开发步骤详解

第一步：创建 Vue 项目

如果你还没有创建项目，可以通过 Vue CLI 快速搭建：

vue create vue-todo
cd vue-todo
npm run serve

选择默认配置即可。

第二步：创建 TodoList 组件

1. 创建组件文件

在 src/components/TodoList.vue 中创建组件。

<template>
  <div class="todo-container">
    <h2>我的待办事项</h2>

    <!-- 添加任务 -->
    <div class="input-group">
      <input
        v-model="newTodo"
        @keyup.enter="addTodo"
        placeholder="输入新任务..."
        class="todo-input"
      />
      <button @click="addTodo" class="btn">添加</button>
    </div>

    <!-- 任务列表 -->
    <ul class="todo-list">
      <li
        v-for="(todo, index) in todos"
        :key="todo.id"
        :class="{ completed: todo.completed }"
        @click="toggleComplete(index)"
        class="todo-item"
      >
        {{ todo.text }}
        <button @click.stop="removeTodo(index)" class="delete-btn">删除</button>
      </li>
    </ul>

    <!-- 操作按钮 -->
    <div class="actions">
      <p>共 {{ todos.length }} 项任务，还有 {{ remainingCount }} 项未完成</p>
      <button @click="clearCompleted" class="btn">清除已完成</button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'

// 初始化任务数组
const todos = ref(loadFromLocalStorage())

// 新增任务
const newTodo = ref('')
function addTodo() {
  const text = newTodo.value.trim()
  if (text === '') return
  todos.value.push({
    id: Date.now(),
    text,
    completed: false
  })
  newTodo.value = ''
}

// 切换完成状态
function toggleComplete(index) {
  todos.value[index].completed = !todos.value[index].completed
}

// 删除任务
function removeTodo(index) {
  todos.value.splice(index, 1)
}

// 清除已完成任务
function clearCompleted() {
  todos.value = todos.value.filter(todo => !todo.completed)
}

// 计算未完成任务数
const remainingCount = computed(() => {
  return todos.value.filter(todo => !todo.completed).length
})

// 监听数据变化并保存到 localStorage
watchEffect(() => {
  saveToLocalStorage(todos.value)
})

// 本地存储方法
function saveToLocalStorage(data) {
  localStorage.setItem('todos', JSON.stringify(data))
}
function loadFromLocalStorage() {
  const data = localStorage.getItem('todos')
  return data ? JSON.parse(data) : []
}
</script>

<style scoped>
.todo-container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-family: Arial;
}

.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.todo-input {
  flex: 1;
  padding: 8px;
  font-size: 16px;
}

.btn {
  padding: 8px 12px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

.todo-list {
  list-style: none;
  padding-left: 0;
}

.todo-item {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.todo-item:hover .delete-btn {
  display: inline-block;
}

.todo-item.completed {
  text-decoration: line-through;
  color: gray;
}

.delete-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  display: none;
  background-color: #e74c3c;
}

.actions {
  margin-top: 20px;
}
</style>

第三步：在 App.vue 中引入组件

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script setup>
import TodoList from './components/TodoList.vue'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

六、运行效果预览

启动项目：

npm run serve

打开浏览器访问 http://localhost:8080，你会看到一个美观且功能齐全的待办事项列表。

你可以：

• 输入任务并按下回车或点击"添加"；
• 点击任务条目切换完成状态；
• 点击"删除"按钮删除任务；
• 点击"清除已完成"按钮一键清理已完成任务；
• 刷新页面后任务不会丢失。

七、功能扩展建议（进阶）

功能	实现建议
支持编辑任务	在任务条目上添加"编辑"按钮，允许修改文本内容
支持任务分类	添加标签或分类字段，如"工作"、"生活"等
使用 Vuex/Pinia	将状态管理抽离出来，便于大型项目维护
支持多人协作	结合 WebSocket 或 Firebase 实现实时同步
支持拖拽排序	使用第三方库如 SortableJS
移动端适配	使用响应式布局优化手机端体验

八、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！