【Vue】Todo案例-总览，配置和⽗组件App
总览
成品
1.初始页⾯
初始页⾯
2.输⼊待办事项，输⼊完成后回车，待办事项添加成功（从上⾄下的移动效果，持续1s），界⾯底部出现全选框、已完成数、事项总数、全部清除按钮
待办输⼊
按下回车后完成填写
3.⿏标移动到相应待办上，字体加粗加⼤，该⾏右边出现删除和编辑按钮。点击事件后，事件变为已完成，底部数据也相应变化
⿏标悬浮效果
完成待办事项
4.点击底部全选/全不选勾选框，所有事项的状态改变，底部统计也相应改变
vuejson转对象
全选状态
全反选状态
5.点击编辑按钮，出现可编辑的输⼊框，输⼊框内容为原待办事项且⾃动获得焦点。输⼊框失焦后编辑完成，输⼊框消失，待办事项内容更新。
点击编辑按钮编辑内容
输⼊框失焦后编辑完成
6.点击删除按钮，浏览器弹窗提⽰，点击确定后所选事项被删除（从下⾄上的移动效果，持续1s），底部统计改变
弹窗提⽰
事项被删除
7.点击删除全部已完成按钮，待办清单中所有已完成项⽬均被删除
全部删除
修改的项⽬⽂件
直接⽤Vue的HelloWorld项⽬改的
改后⽬录
HelloWorld.vue就是原来的样⼦
配置
main.js
main.js index.js
暂时还不会整路由就把这⾥全注掉了，不注掉的话会显⽰HelloWorld.vue⾥的内容对不起，俺太菜了.jpg
⽗组件App

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。