Vue新手向：14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程，这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo（待办事项）应用。

书写此教程的动机

Vue 作者尤雨溪在 新手向：Vue 2.0 的建议学习顺序 中给出了中肯的 Vue 学习建议，本系列教程和项目可以看做是这个建议的实践可操作版本。

Vue 官方文档给出了 2 个示例项目，一个是 TodoMVC，令一个是 HackerNews 克隆。这两个项目一个用于入门，一个用于进阶。读懂这两个项目，几乎可以对 Vue 全部的核心特性：计算属性、侦听器、指令、动态样式绑定、条件渲染、列表渲染、事件处理、表单绑定、组件、组件间的通信、Vue 路由、服务端渲染、Vuex 等有一个全面的了解和掌握。遗憾是的，Vue 官方只有这两个项目的成品，而没有对应的开发教程。因此，本系列教程诞生的动机，就是剖析这两个项目，抽丝剥茧地带领 Vue 初学者们从 0 开始开发这两个项目，并在开发中不断学习巩固 Vue 的相关知识。

Vue2.x Todo 系列教程 仅仅只是一个开端，依据尤雨溪的学习建议，我们会结合两个项目，完成下面的事情：

1. 直接在 html 页面中编写 Vue，开发一个功能齐全的 Todo 应用，从中学习 Vue 的基础特性。
2. 直接在 html 页面中编写 Vue，开发一个 HackerNews 应用，从中全面学习 Vue 的核心特性。
3. 使用 Webpack 打包，开发一个 HackerNews 应用，了解前端工程化。

配套教程会相继推出，帮助大家入门 Vue 开发，请关注我的个人博客 追梦人物的博客 或 掘金主页。

教程特色

• 完全面向新手，只需非常基础的 HTML、CSS 和 JavaScript 知识。
• 抛却复杂的前端工程化配置过程，仅仅需要准备一个可以输入代码的文本编辑器和一个现代化的浏览器就可以运行 Vue 应用，聚焦 Vue 核心特性，而不是 webpack。
• 完善的 GitHub 仓库，每一个开发步骤的代码都有一个对应分支，方便学习遇到问题时和示例项目的代码进行比较。
• 关键开发步骤配有对应的开发练习，让你将所学的知识立即用于实践，练习配有完善的参考实现。
• 持续的改进。

项目演示

我们的项目最终完成效果就是下面这个样子：

你可以看到应用的界面处于上个世纪 80 年代的水平，因为我们使用了浏览器原生的 UI 而未加任何 CSS 样式。采用这种风格有很大的好处，这样我们可以将注意力完全集中在 Vue 的使用上，而不用关注那些多余的元素样式。毕竟连 Google、Amazon 和 Facebook 等很多知名公司的应用也采用这种极简化风格设计，而且小米创始人雷军也说过"没有设计的设计就是最好的设计"，说明这种设计还是有可取之处的。

当然采用一些如 Boostrap、Materialize 等框架后很容易为我们的 Vue Todo 应用加上样式，如果你做了一个风格不一样的 Todo，欢迎提一个 pull requests 给我。

使用一个 Todo 应用来讲解 Vue 的核心特性是非常合适的，因为它麻雀虽小，但五脏俱全。一个 todo，几乎可以囊括 Vue 中计算属性、侦听器、指令、动态样式绑定、条件渲染、列表渲染、事件处理、表单绑定、组件、组件间的通信、自定义指令等核心特性。通过一个 todo 的例子来理解这些特性能帮助我们做什么事情，然后回过头去看相对枯燥的官方入门文档，一定会对 Vue 的这些特性有一个更加深刻的了解。

相关资源

• Todo 应用源码 GitHub 地址：vue2.x-todo-tutorial
• 应用在线演示：Vue2.x Todo
• 开发教程：Vue 2.x Todo 教程
• 教程中的练习参考答案：Vue 2.x Todo 教程练习参考答案

教程目录索引

教程

• 入门仪式：Hello Vue
• UI
• 显示todo列表
• 添加todo
• 标为完成
• 删除todo
• 编辑todo
• 自定义指令实现自动聚焦
• 全部标为完成
• 还剩多少todo未完成
• 筛选
• 批量清除todo
• 本地存储
• 组件化todo应用

教程中的练习参考答案

• 入门仪式_Hello_Vue练习参考答案
• 添加todo练习参考答案
• 标为完成练习参考答案
• 删除todo练习参考答案
• 编辑todo练习参考答案
• 筛选练习参考答案
• 批量清除todo练习参考答案

开始学习吧！