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

Vue 3 30天精进之旅：Day 21 - 项目实践：打造功能完备的Todo应用

news 来源：原创 2025/5/18 11:46:32

前言

经过前20天的学习，我们已经掌握了Vue 3的核心概念、组合式API、路由、状态管理等关键技术。今天将通过一个完整的项目实践——Todo应用，将所学知识融会贯通。我们将为Todo应用添加编辑、删除、过滤等进阶功能，并优化代码结构。

一、项目回顾与初始化

假设已通过Vue CLI创建了一个基础Todo应用，当前功能包括：

添加Todo项
展示Todo列表
切换Todo完成状态

项目结构如下：

src/
├── components/
│   └── TodoItem.vue
├── store/
│   └── index.js       # Vuex状态管理
├── router/
│   └── index.js       # 路由配置
├── views/
│   └── TodoList.vue
└── App.vue

二、功能实现：编辑Todo项

目标：双击Todo文本进入编辑模式，输入后保存修改。

1. 组件通信优化

在TodoItem.vue中，添加编辑逻辑：

<template><div class="todo-item"><!-- 双击触发编辑模式 --><span v-if="!isEditing" @dblclick="enterEditMode">{{ todo.text }}</span><!-- 编辑输入框 --><input v-elsetype="text"v-model="editedText"@blur="saveEdit"@keyup.enter="saveEdit"/></div>
</template><script setup>
import { ref } from 'vue';
const props = defineProps(['todo']);
const emit = defineEmits(['edit-todo']);const isEditing = ref(false);
const editedText = ref(props.todo.text);const enterEditMode = () => {isEditing.value = true;
};const saveEdit = () => {if (editedText.value.trim()) {emit('edit-todo', {id: props.todo.id,text: editedText.value.trim()});isEditing.value = false;}
};
</script>

2. Vuex中实现编辑Mutation

在store/index.js中添加：

mutations: {EDIT_TODO(state, payload) {const todo = state.todos.find(t => t.id === payload.id);if (todo) todo.text = payload.text;}
}

三、功能实现：删除Todo项（续）

1. 添加删除按钮

修改TodoItem.vue模板：

<template><div class="todo-item"><!-- ...原有内容... --><button

2. Vuex中实现删除Mutation

在store/index.js中添加删除逻辑：

mutations: {// ...其他mutation...DELETE_TODO(state, todoId) {state.todos = state.todos.filter(t => t.id !== todoId);}
}

3. 组件中触发删除事件

在TodoItem.vue中添加删除按钮逻辑：

<template><div class="todo-item"><!-- ...原有内容... --><button @click="deleteTodo">🗑️</button></div>
</template><script setup>
const deleteTodo = () => {emit('delete-todo', props.todo.id);
};
</script>

在父组件TodoList.vue中处理事件：

<template><TodoItem v-for="todo in filteredTodos" :key="todo.id":todo="todo"@edit-todo="editTodo"@delete-todo="deleteTodo"/>
</template><script setup>
const deleteTodo = (id) => {store.commit('DELETE_TODO', id);
};
</script>

四、功能实现：过滤Todo项

目标：添加"全部/已完成/未完成"过滤功能。

1. Vuex中添加过滤状态

// store/index.js
state: {todos: [],filter: 'all' // all | completed | active
},
getters: {filteredTodos: (state) => {switch (state.filter) {case 'completed': return state.todos.filter(t => t.done);case 'active':return state.todos.filter(t => !t.done);default:return state.todos;}}
},
mutations: {SET_FILTER(state, filter) {state.filter = filter;}
}

2. 添加过滤组件

创建components/FilterTodos.vue：

<template><div class="filters"><button v-for="filter in filters":key="filter":class="{ active: currentFilter === filter }"@click="setFilter(filter)">{{ filter }}</button></div>
</template><script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';const store = useStore();
const filters = ['all', 'active', 'completed'];const currentFilter = computed(() => store.state.filter);const setFilter = (filter) => {store.commit('SET_FILTER', filter);
};
</script><style scoped>
.active {background: #42b983;color: white;
}
</style>

3. 在父组件中集成

<!-- TodoList.vue -->
<template><FilterTodos /><!-- ...其他内容... -->
</template>

五、代码优化与重构

目标：提升代码可维护性

1. 模块化Vuex Store

创建store/modules/todos.js：

export default {state: () => ({todos: [],filter: 'all'}),mutations: { /* ... */ },getters: { /* ... */ }
}

更新store/index.js：

import todosModule from './modules/todos';export default createStore({modules: {todos: todosModule}
});

2. 组件拆分

将Todo列表项拆分为components/TodoList.vue，逻辑与视图分离。

六、添加过渡动画

优化用户体验，为Todo项添加进场/退场动画：

<!-- TodoList.vue -->
<template><TransitionGroup name="todo-list" tag="ul"><TodoItem v-for="todo in filteredTodos" :key="todo.id":todo="todo"/></TransitionGroup>
</template><style>
.todo-list-enter-active,
.todo-list-leave-active {transition: all 0.5s ease;
}
.todo-list-enter-from,
.todo-list-leave-to {opacity: 0;transform: translateX(30px);
}
</style>

七、完整功能演示

最终实现功能：

✅ 添加Todo（回车确认）
✅ 编辑Todo（双击修改）
✅ 删除Todo（点击垃圾桶图标）
✅ 切换完成状态（复选框）
✅ 过滤显示（全部/进行中/已完成）
🎨 平滑的过渡动画

八、总结与扩展

今日收获：

实践了组件通信的多种方式（props/emit/Vuex）
掌握了Vuex状态管理模式的核心流程
体验了组合式API的模块化优势
学会使用Transition组件实现动画

扩展挑战：

添加本地存储持久化（localStorage）
实现拖拽排序功能
增加分类标签系统
部署到Vercel/Netlify

Vue 3 30天精进之旅：Day 21 - 项目实践：打造功能完备的Todo应用

前言经过前20天的学习，我们已经掌握了Vue 3的核心概念、组合式API、路由、状态管理等关键技术。今天将通过一个完整的项目实践——Todo应用，将所学知识融会贯通。我们将为Todo应用添加编辑、删除、过滤等进阶功能，并优化代码结构。一、项目…...

编程日记 2025/5/18 11:46:32

2025年02月11日Github流行趋势

项目名称：unsloth 项目地址url：https://github.com/unslothai/unsloth项目语言：Python历史star数：27175今日star数：1024项目维护者：danielhanchen, shimmyshimmer, Erland366, Datta0, xyangk项目简介&…...

编程日记 2025/5/17 1:28:08

嵌入式硬件篇---原码、补码、反码

文章目录前言简介八进制原码、反码、补码1. 原码规则示例问题 2. 反码规则示例问题 3. 补码规则示例优点 4. 补码的运算5. 总结十六进制原码、反码、补码1. 十六进制的基本概念2. 十六进制的原码规则示例 3. 十六进制的反码规则示例 4. 十六进制的补码规则示例 5. 十六进制补…...

编程日记 2025/5/18 10:27:18

PCM与G711A互转

PCM与G711A互转工具类（Java）调用方法（Kotlin） 工具类（Java） public class G711Code {private final static int SIGN_BIT 0x80;private final static int QUANT_MASK 0xf;private final static int SEG…...

编程日记 2025/5/17 11:23:41

MapReduce简单应用(三)——高级WordCount

目录 1. 高级WordCount1.1 IntWritable降序排列1.2 输入输出格式1.3 处理流程 2. 代码和结果2.1 pom.xml中依赖配置2.2 工具类util2.3 高级WordCount2.4 结果参考本文引用的Apache Hadoop源代码基于Apache许可证 2.0，详情请参阅 Apache许可证2.0。 1. 高级WordCo…...

编程日记 2025/5/11 18:18:44

C# 数据验证Regex

Regular Expression，简称 Regex,是一种用于匹配和处理文本的强大工具。它通过定义特定的模式，可以用来搜索、替换或提取字符串中的特定内容。先引入命名空间 using System.Text.RegularExpressions; Intege(整数) 必须是正整数 //必须是正整数publi…...

编程日记 2025/5/16 17:28:16

Jenkins+gitee 搭建自动化部署

Jenkinsgitee 搭建自动化部署环境说明： 软件版本备注CentOS8.5.2111JDK1.8.0_211Maven3.8.8git2.27.0Jenkins2.319最好选稳定版本，不然安装插件有点麻烦一、安装Jenkins程序 1、到官网下载相应的版本war或者直接使用yum安装 Jenkins官网下载直接…...

编程日记 2025/5/14 0:08:13

C/C++混合读入cin与scanf问题

因为C/C在某些时候是如此的融洽，以至于很多时候可能会混用，就比如 scanf与cin或getline(cin, ..)这是一个严肃的问题。因为随意混用，可能导致，在某些特殊时刻，读取混乱。所以本篇的意义就是为了缕清混用机制一、scan…...

编程日记 2025/5/17 6:30:55

矩阵 NFC 碰一碰发视频源码搭建技术解析,支持OEM

一、引言在移动互联与物联网飞速发展的当下，NFC（Near Field Communication，近场通信）技术凭借其便捷、快速的数据传输特性，在众多领域得到广泛应用。本文将深入探讨如何搭建矩阵 NFC 碰一碰发视频的源码，…...

编程日记 2025/5/12 15:14:20

Log4j定制JSON格式日志输出

1.前言 log4j是Java中一个强大的日志记录框架，通过简单的配置便可以在程序中进行日志打印与记录。关于log4j博主最近碰到一个需求，需要将程序运行过程中的日志按给定的json模板输出，本文记录一下log4j如何配置json格式的日志打印。 2.日志配…...

编程日记 2025/5/18 0:57:02

Spring依赖注入方式

写在前面：大家好！我是晴空๓。如果博客中有不足或者的错误的地方欢迎在评论区或者私信我指正，感谢大家的不吝赐教。我的唯一博客更新地址是：https://ac-fun.blog.csdn.net/。非常感谢大家的支持。一起加油，冲鸭&#x…...

编程日记 2025/5/13 17:25:45

【C++八股】什么是函数指针，如何定义和使⽤场景

函数指针是指向函数的指针变量，它存储的是一个函数的地址，允许通过指针间接调用函数。使用函数指针可以动态地选择和调用函数，或者将函数作为参数传递给其他函数。 1. 函数指针的定义函数指针的定义与普通指针稍有不同。它需要声明指向特定…...

编程日记 2025/5/14 15:39:15

DeepSeek 入驻 Cursor —— 表现能否超越 Claude？

DeepSeek 刚刚在 Cursor 平台上线了它的两款模型：DeepSeek V3 和 R1。目前，许多开发者（包括我们在内）主要依赖 Claude 3.5 Sonnet（最新版本 claude-3-5-sonnet-20241022）作为主要语言模型，因此我…...

编程日记 2025/5/18 7:38:07

skynet-src/atomic.h:25:23: 致命错误：stdatomic.h：没有那个文件或目录

skynet-src/atomic.h:25:23: 致命错误：stdatomic.h：没有那个文件或目录故事背景，又接了一个新项目，要搞开发环境啊。skyent的框架。ubuntu已经跑起来了，但是内网是centos的跑不起来。只能怀疑是环境问题了&#xff0…...

编程日记 2025/5/13 12:10:57

docker compose部署nexus

整个工具的代码都在Gitee或者Github地址内 gitee：solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github：GitHub - ZeroNing/solomon-parent: 这个项目主要是…...

编程日记 2025/5/13 11:44:20

IBM服务器刀箱Blade安装Hyper-V Server 2019 操作系统

案例：刀箱某一blade，例如 blade 5 安装 Hyper-V Server 2019 操作系统（安装进硬盘）刀箱USB插入安装系统U盘，登录192.168... IBM BlandeCenter Restart Blande 5，如果Restart 没反应，那就 Power Off Blade 然后再 Power On 重启后进入BIOS界面设置usb存储为开机启动项 …...

编程日记 2025/5/17 11:25:47

Python的顺序结构和循环结构

文章目录一、条件语句（1）条件语句的定义（2）条件语句的语法（a）单分支 if（b）双分支 if-else（c）多分支 if-elif-elif-...-else （3）注意事…...

编程日记 2025/5/17 17:13:47

[python SQLAlchemy数据库操作入门]-30.掌握 SQLAlchemy：优雅应对数据库异常的艺术

哈喽，大家好，我是木头左！捕获和处理 SQLAlchemy 异常在实际应用中，需要根据不同的异常类型采取不同的处理策略。下面是一个示例，展示了如何捕获和处理 SQLAlchemy 的异常。 from sqlalchemy import create_engine, Column, Integer, String, exc from sqlalchemy.ext.…...

编程日记 2025/5/8 2:37:45

编译和链接【三】

文章目录编译和链接【三】前言系列文章入口编译过程词法分析语法分析语义分析生成中间代码汇编链接编译和链接【三】前言在我大一的时候， 我使用VC6.0对C语言程序进行编译链接和运行 ， 然后我接触了VS， Qt creator等众多IDE&#xff0c…...

编程日记 2025/5/16 17:33:10

11苍穹外卖之Apache ECharts（数据可视化图表、后端传数据）

课程内容 Apache ECharts 营业额统计用户统计订单统计销量排名Top10 功能实现：数据统计数据统计效果图： 1. Apache ECharts 1.1 介绍 Apache ECharts 是一款基于 Javascript 的数据可视化图表库，提供直观，生动&#…...

编程日记 2025/5/6 12:13:31

Grafana-使用Button修改MySQL数据库

背景众所周知，Grafana是一个用来展示数据的平台，但是有时候还是会有需求说能不能有一个按钮，点击的时候再对数据库进行修改，从而达到更新数据的效果经过多方查证，终于实现了一个简单的，点击button执行sq…...

编程日记 2025/5/7 7:49:48

C++11语法及库详解

目录一、c11语法 1. 自动类型推导 (auto) 2. 基于范围的 for 循环 3. Lambda 表达式 4. 智能指针 5. 右值引用和移动语义 6. nullptr 关键字 7. constexpr 关键字 8. 初始化列表 9. std::thread 多线程支持 10. std::function 和 std::bind 11. std::unordered_map…...

编程日记 2025/5/18 2:48:10

数据库，数据表的增删改查操作

一.数据库的基本操作 （1）创建数据库创建数据库就是在数据库系统中划分一块存储数据的空间，方便数据的分配、放置和管理。在MySQL中使用CREATE DATABASE命令创建数据库，语法格式如下: CREATE DATABASE数据库名称; 注&#xff1a…...

编程日记 2025/5/15 7:01:11

Python——批量图片转PDF（GUI版本）

目录专栏导读1、背景介绍2、库的安装3、核心代码4、完整代码总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手 🏳️‍🌈 博客主页：请点击——> 一晌小贪欢的博客主页求关注 👍 该系列文章专栏：请点击——>Python办公自动化专…...

编程日记 2025/5/18 6:33:03

RocketMQ面试题：原理部分

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/5/17 23:40:31

中间件-安装Minio-集成使用（ubantu-docker）

目录 1、安装docer 2、运行以下命令拉取MinIO的Docker镜像 3、检查当前所有Docker下载的镜像 4、创建目录 5、创建Minio容器并运行 6、SDK操作 FileUploader.java 1、安装docer 参考这篇：Linux安装Docker 2、运行以下命令拉取MinIO的Docker镜像 docker pull…...

编程日记 2025/5/16 11:46:21

vue3: const一个function怎么写呢？

问： 用ref或者reactive定一个一个const refCharts ref(function xxx (config){ xxxxx,xxxxx xxxx,xxxx })请问怎么写？ 回答： 在 Vue 3 中，ref 和 reactive 是两种常用的响应式数据定义方式。ref 用于定义单个响应式对象或原始值…...

编程日记 2025/5/17 20:32:19

【JVM详解三】垃圾回收机制

一、对象是否存活强引用：Object obj new Object(); 只要强引用还在，垃圾收集器永远不会回收掉被引用的对象。在不用对象的时将引用赋值为 null，能够帮助垃圾回收器回收对象。比如 ArrayList 的 clear() 方法实现。软引用（SoftRe…...

编程日记 2025/5/16 6:02:26

dbeaver 安装之后出现mysql连接异常问题

1.手动下载mysql驱动程序参考文档DBeaver连接mysql驱动下载失败怎么办？-CSDN博客 2.添加对应的下载程序到dbeaver 【DBeaver】缺少mysql驱动_dbeaver连接mysql缺少驱动-CSDN博客配置mysql 地址端口账户等即可使用...

编程日记 2025/5/1 5:04:20

Android Studio历史版本下载

Android Studio历史版本下载历史版本所在网站: https://developer.android.google.cn/studio/archive 等待加载 1、（需要点击switch to english）然后出现Terms and conditions 2、滑到最下面，点击I agree to the terms，之后才会…...

编程日记 2025/5/14 5:26:12

【每日一题 | 2025】2.3 ~ 2.9

个人主页：GUIQU. 归属专栏：每日一题文章目录 1. 【2.3】P8784 [蓝桥杯 2022 省 B] 积木画2. 【2.4】P8656 [蓝桥杯 2017 国 B] 对局匹配3. 【2.5】[ABC365D] AtCoder Janken 34. 【2.6】P8703 [蓝桥杯 2019 国 B] 最优包含5. 【2.7】P8624 [蓝桥杯 2015…...

编程日记 2025/5/10 8:34:12

国产编辑器EverEdit - 迷你查找

1 迷你查找 1.1 应用场景某些场景下，用户不希望调出复杂的查找对话框，此时可以使用迷你查找窗口。 1.2 使用方法选择主菜单查找 -> 迷你查找，或使用快捷键Ctrl Alt F，会在右上角弹出迷你查找窗口，如下图所示…...

编程日记 2025/5/16 14:59:09

制药行业 BI 可视化数据分析方案

一、行业背景随着医药行业数字化转型的深入，企业积累了海量的数据，包括销售数据、生产数据、研发数据、市场数据等。如何利用这些数据，挖掘其价值，为企业决策提供支持，成为医药企业面临的重大挑战。在当今竞争激烈的…...

编程日记 2025/5/14 7:07:08

第40天:Web开发-JS应用VueJS框架Vite构建启动打包渲染XSS源码泄露代码审计

#知识点 1、安全开发-VueJS-搭建启动&打包安全 2、安全开发-VueJS-源码泄漏&代码审计一、Vue搭建创建项目启动项目 1、Vue 框架搭建->基于nodejs搭建，安装nodejs即可参考：https://cn.vuejs.org/ 已安装18.3或更高版本的Node.js 2、Vue 创建…...

编程日记 2025/5/15 13:18:18

2.10学习总结

今天接着看了数据结构，但是跟指针有关的看不懂（万恶的指针），写了考试的补题。 #include <stdio.h> #include <stdlib.h> int a[1000005]; int main() {int n,i,x0;scanf("%d",&n);for(i1;i<n;i){x;i…...

编程日记 2025/5/14 19:33:49

MySQL 中可以通过添加主键来节省磁盘空间吗？（译文）

从历史上看，MySQL 不需要在表上定义显式主键，直到今天默认都是这样。不过，这种要求是通过两种复制方法施加的：组复制和 Percona XtraDB 集群 （PXC），默认情况下不允许使用没有主键的表。对于缺少…...

编程日记 2025/5/17 4:04:07

Django在终端创建项目（pycharm Windows）

1.选择目录选择或新建一个文件夹，作为项目保存的地方 2.右键在终端打开 3.确定django-admin.exe安装位置找到自己安装django时，django-admin.exe安装的位置，例如 4.运行命令使用django-admin.exe的绝对路径，在刚才打开的终端…...

编程日记 2025/5/16 22:41:04

IDEA接入DeepSeek

IDEA 目前有多个途径可以接入deepseek，比如CodeGPT或者Continue，这里借助CodeGPT插件接入，CodeGPT目前用的人最多，相对更稳定一、安装 1.安装CodeGPT idea插件市场找到CodeGPT并安装 2.创建API Key 进入deepseek官网&#xf…...

编程日记 2025/5/18 8:31:18

Linux 内核自旋锁spinlock（二）--- ticket spinlock

文章目录前言一、ticket spinlock二、源码分析2.1 spin_lock_init2.2 spin_lock2.2 spin_unlock 参考资料前言自旋锁是 Linux 内核中最底层的互斥机制。因此，它们对内核的安全性和性能有着巨大的影响，因此对各种（特定架构的）自…...

编程日记 2025/5/13 17:34:41

Elixir语言的计算机基础

Elixir语言的计算机基础引言 Elixir是一种现代的编程语言，建立在Erlang虚拟机（BEAM）上，专注于并发、分布式系统和容错能力。随着互联网的发展，应用程序的需求变得越来越复杂，Elixir凭借其高效的性能、灵…...

编程日记 2025/5/18 2:04:55

MindStudio制作MindSpore TBE算子（二）算子测试

在上一节中，成功制作了Mindspore的Add算子，具体可以查看MindStudio制作MindSpore TBE算子（一）算子制作，这一节，一起看看如何对算子进行测试。建议参考以下内容一起食用： 算子代码实现 MindSpor…...

编程日记 2025/5/16 20:33:33

深度解读城市地下网管管廊改造要点

引言近日国家发改委和住建部联合发布通知（后附），要求各地抓紧编制“城市地下管网和综合管廊建设改造实施方案”并于12月27日前报国家发改委和住建部相关司处，逾期未报的城市（县、区），视同自愿…...

编程日记 2025/5/17 1:40:01

一、简易单机版 1、镜像拉取 # docker hub 镜像 docker pull redis:7.0.4-bullseye # 阿里云镜像 docker pull alibaba-cloud-linux-3-registry.cn-hangzhou.cr.aliyuncs.com/alinux3/redis_optimized:20240221-6.2.7-2.3.0 2、运行镜像 docker run -itd --name redis \n …...

编程日记 2025/5/17 9:17:00

Day88：加载游戏图片

在游戏开发中，加载和显示图片是非常常见的需求，尤其是在 2D 游戏中，角色、背景、道具、敌人等都需要用图片来表示。今天，我们将学习如何在 Python 游戏开发中使用 Pygame 加载并显示图片。 1. 加载游戏图片的基本步骤在 Pygame 中加载图片通常需要以下几个步骤：导入 P…...

编程日记 2025/5/16 16:26:00

Elasticsearch：在 Elastic 中玩转 DeepSeek R1 来实现 RAG 应用

在这个春节，如一声春雷，DeepSeek R1 横空出世。现在人人都在谈论 DeepSeek R1。这个大语言模型无疑在中国及世界的人工智能发展史上留下了重要的里程碑。那么我们改如何结合 DeepSeek R1 及 Elasticsearch 来实现 RAG 呢？在之前的文章 “使用…...

编程日记 2025/5/16 21:14:37

SOME/IP报文格式及发现协议详解

在之前的文章中，我们介绍了SOME/IP协议的几种服务接口。在本篇博客中，主要介绍some/ip协议传输的header报文格式以及SOME/IP-SD发现协议。目录流程报文格式 Message ID Length Request ID protocal version/Interface Version Message Type…...

编程日记 2025/5/16 21:24:21