基于 Vue 2.x 开发的待办事项(Todo)应用,包含一套详细的开发教程。演示效果:
-
应用在线演示:Vue2.x Todo
-
开发教程:Vue 2.x Todo 教程
-
教程中的练习参考答案:Vue 2.x Todo 教程练习参考答案
每篇教程对应一个分支,例如教程的第一篇 入门仪式:Hello Vue,对应分支 step1-hello-vue,因为教程是循序渐进的,这样方便在学习的过程中对照每一步的代码。
特殊分支:
-
master 主分支,演示应用的代码分支,非样式美化的功能增强代码请提交到这个分支。
-
bs4-todo 分支,Bootstrap4 主题应用的分支(等待贡献中)。
-
materialize-todo 分支,Materialize 主题应用的分支(等待贡献中)。
克隆项目到本地,用浏览器打开 todos.html 页面即可运行应用。
欢迎参与到本项目中来,目前本项目接受这些形式的代码贡献:
- 练习参考答案中的功能增强代码 PR 到 master 分支
- 使用 Bootstrap4 美化的应用,PR 到 bs4-todo 分支
- 使用 Materialize 美化的应用,PR 到 materialize-todo 分支
- master 分支代码的 bug 修复
- master 分支应用功能增强(需同时附带一篇新功能开发的教程)
注:某些代码可能会被多次提交,只合并第一个提交的且符合要求的 PR。其余的请 PR 一个链接到下方的成果展示区。
遇到问题或者讨论请在 issues区 或者 教程 评论区留言。
此外请关注我的个人博客 追梦人物的博客 或 掘金主页,本项目只是开端,后续将按照 Vue 作者尤雨溪在知乎回答『新手向:Vue 2.0 的建议学习顺序』中给出的学习建议,发布一些列配套教程,帮助大家入门 Vue 开发,敬请期待。
教程
- 入门仪式:Hello Vue
- UI
- 显示todo列表
- 添加todo
- 标为完成
- 删除todo
- 编辑todo
- 自定义指令实现自动聚焦
- 全部标为完成
- 还剩多少todo未完成
- 筛选
- 批量清除todo
- 本地存储
- 组件化todo应用
教程中的练习参考答案
快来展示你的学习成果吧!