50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | TodoList（代办事项组件）
📅 我们继续 50 个小项目挑战！—— TodoList组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/
使用 Vue 3 的组合式 API (<script setup>) 和一些基础的 Tailwind CSS 来创建一个功能齐全的待办事项（To-Do）应用。这个应用包括添加新任务、标记任务为完成状态以及删除任务的功能，并且所有的数据都会被保存到用户的 localStorage 中，以便在页面刷新后仍然保留。
🎯 应用目标
我们的目标是创建一个轻量级但功能完整的待办事项管理器，用户可以：
- 添加新的待办事项
- 标记待办事项为完成或未完成
- 右键点击待办事项以删除它
- 确保数据在页面刷新后依然存在
🔧 技术实现点
💻关键技术与概念
| 技术/概念 | 描述 |
|---|---|
<script setup> | Vue 3 提供的一种更简洁的语法糖来编写组件逻辑 |
ref | 用于定义响应式变量 |
watch | 监听响应式数据的变化并执行相应的回调函数 |
onMounted | 生命周期钩子，在组件挂载完成后调用 |
localStorage | 浏览器提供的持久化存储API，用于保存数据即使浏览器关闭后依旧可用 |
| Tailwind CSS | 一种实用优先的CSS框架，通过类名快速构建UI |
主要功能
- 数据持久化：通过
localStorage实现待办事项的持久化存储。 - 响应式数据处理：利用 Vue 3 的
ref实现对数据的响应式管理。 - 交互设计：
- 左键点击某项待办事项可切换其完成状态。
- 右键点击某项待办事项可将其删除。
- 样式设计：使用 Tailwind CSS 快速搭建美观且响应式的界面。
🖌️ 组件实现
💻 模板结构 <template>
<template><div class="font-poppins flex min-h-screen flex-col items-center justify-center bg-gray-100 p-4 text-gray-800"><h1 class="mb-6 text-center text-[clamp(5rem,15vw,10rem)] font-light text-purple-400 opacity-40">todos</h1><form @submit.prevent="addTodo" class="w-full max-w-md shadow-lg"><input v-model="newTodoText" type="text" placeholder="Enter your todo" autocomplete="off" class="w-full border-none p-4 text-2xl focus:ring-2 focus:ring-purple-400 focus:outline-none" /><ul class="divide-y divide-gray-100 bg-white"><li v-for="(todo, index) in todos" :key="index" @click="toggleTodo(index)" @contextmenu.prevent="deleteTodo(index)" class="cursor-pointer p-4 text-xl transition-colors hover:bg-gray-50" :class="{ 'text-gray-400 line-through': todo.completed }">{{ todo.text }}</li></ul></form><small class="mt-8 text-center text-gray-500">Left click to toggle completed.<br />Right click to delete todo</small></div>
</template>
💡 解析
- 标题部分: 利用
clamp()函数确保标题大小根据屏幕宽度自适应调整，同时给用户提供视觉上的吸引力。 - 表单输入: 输入框绑定
v-model到newTodoText，允许用户输入新的待办事项。通过@submit.prevent阻止默认提交行为并触发addTodo方法。 - 列表展示: 使用
v-for渲染每个待办事项，提供点击事件来切换完成状态和右键菜单来删除项目。对于已完成的任务，通过条件类改变文本颜色和添加删除线。 - 提示信息: 小字提示告知用户交互方式。
💻 脚本逻辑 <script setup>
<script setup>
import { ref, watch, onMounted } from 'vue'// 响应式数据
const newTodoText = ref('')
const todos = ref([])// 从localStorage加载待办事项
onMounted(() => {const savedTodos = localStorage.getItem('todos')if (savedTodos) {todos.value = JSON.parse(savedTodos)}
})// 添加待办事项
const addTodo = () => {if (newTodoText.value.trim()) {todos.value.push({text: newTodoText.value.trim(),completed: false,})newTodoText.value = ''}
}// 切换待办事项完成状态
const toggleTodo = (index) => {todos.value[index].completed = !todos.value[index].completed
}// 删除待办事项
const deleteTodo = (index) => {todos.value.splice(index, 1)
}// 监听todos变化，保存到localStorage
watch(todos, (newTodos) => {localStorage.setItem('todos', JSON.stringify(newTodos))
}, { deep: true })
</script>
💡 解析
- 初始化数据: 使用
ref定义newTodoText和todos，分别代表新输入的待办事项文本和当前所有待办事项列表。 - 加载已有数据: 在组件挂载时，尝试从
localStorage加载之前保存的待办事项。 - 操作方法:
addTodo: 当用户提交新待办事项时，检查非空后添加至列表，并清空输入框。toggleTodo: 切换指定索引处待办事项的完成状态。deleteTodo: 从列表中移除指定索引处的待办事项。
- 监听数据变更: 使用
watch监听todos的任何更改，并将更新后的数据同步回localStorage，保证数据持久性。
📁 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
{id: 49,title: 'TodoList',image: 'https://50projects50days.com/img/projects-img/49-todo-list.png',link: 'TodoList',},
router/index.js 中添加路由选项：
{path: '/TodoList',name: 'TodoList',component: () => import('@/projects/TodoList.vue'),},
🏁 总结
实现了一个基本的待办事项应用，但你仍有许多优化空间：
- ✅ 提高用户体验：例如，可以增加动画效果来提升交互体验，或者引入拖拽排序功能让用户能够更灵活地管理他们的待办事项。
- ✅ 增强数据安全性：考虑到
localStorage存储的数据容易被清除或篡改，考虑采用更安全的数据存储方案如 IndexedDB 或者结合后端服务进行数据管理。 - ✅ 支持更多功能：比如设置待办事项的截止日期、分类标签等高级特性，使应用更加实用。
总之，这是一个非常基础但全面的示例，展示了如何希望这能激发你进一步探索 Vue.js 的强大功能，并开发出更多令人兴奋的应用程序！
👉 下一篇，我们将完成InsectCatchGame组件，一个很恶心的昆虫捕捉游戏。🚀
感谢阅读，欢迎点赞、收藏和分享 😊