Vue实现todoList待办事项小应用

vue实现简单的Todolist应用

GitHub链接：link.
技术栈：

• vue
• vue-cli
• webpack
• ES6语法

大致实现功能如下：

1、在输入框中输入待办事项并按回车键可以把内容添加到下面列表中，并且待办事项总数会随之增加
2、点击复选框，实现选中或不选中效果（即完成或未完成）
3、选项卡后有“❌”按钮，完成后点击该按钮可以删除该事项
4、点击“all”按钮，可以查看所有待办事项
5、点击“active”按钮，可以查看未完成事项，复选框会显示未选中效果
6、点击“completed”按钮，可以查看已完成事项，复选框会实现选中效果
7、点击“clear completed”按钮，可以删除所有已完成事项

待完成功能：关闭浏览器，再次打开后任务还存在，（需要用到本地存储）

以下为项目目录结构：

项目启动：npm run dev

该项目一共分为三大组件来实现，分别是MainToDo(包括TodoInfo和Todo Item两个子组件)，MainHeader,MainFoooter

MainToDo(核心为父组件向子组件传值)

• 页面展示
  
  * (子组件)TodoItem 组件
  页面展示:
  
  * (子组件)TodoInfo 组件
  页面展示:
  
  MainHeader:
• 页面展示
  

MainFoooter

• 页面展示
  

App.vue

涉及到的知识点如下：

1、监听器watch实时统计剩余的待办事项
data部分：

watch部分：

• 注意
  deep: true–表示监听每个一个属性的变化
  hander–处理函数, 过滤没有完成的数组, 并获取长度

2、计算属性 computed，计算剩余的待办事项

来看看效果图：

总结

该系统并未对功能实现更加具体的完善，也是对vue框架的应用，整体较简单，vue小白完全适合读懂