TodoList案例

提示:本文基于对vue的学习,做一个案例,本文只是第一版,后续将对该功能不断进行优化


前言

提示:这里可以添加本文要记录的大概内容:

在之前的学习中我们已经学习了Vue里的基本使用,本篇文章将对基于Vue的使用做一个案例


提示:以下是本篇文章正文内容

一、静态组件

在这里插入图片描述
在这里插入图片描述
app.vue
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、初始化列表

展示动态数据
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、添加一个todo

在这里插入图片描述
在这里插入图片描述

以目前的知识来看,list和header不能通信,即header组件里的topoobj不能传递给list

那么如何处理?
借助父亲来解决

在这里插入图片描述

处理方式:
在这里插入图片描述

3.1 父传子

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2 子传父

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

3.3 优化处理

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.4 完善

在这里插入图片描述

在这里插入图片描述

3.5 组件间通信

在这里插入图片描述

四、勾选

4.1 实现

在这里插入图片描述
app:
在这里插入图片描述
myList:
在这里插入图片描述
MyItem:
在这里插入图片描述
在这里插入图片描述

4.2 修改写法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、删除

在这里插入图片描述

在这里插入图片描述

六、底部统计

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

七、底部交互

7.1 全选

在这里插入图片描述

app.vue:
在这里插入图片描述
在这里插入图片描述
myfooter.vue:
在这里插入图片描述
在这里插入图片描述

优化:
myfooter.vue:
在这里插入图片描述
在这里插入图片描述

7.2 清除已完成

app.vue:
在这里插入图片描述
在这里插入图片描述
myfooter.vue
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

八、总结

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值