本教程基于 Vue.js 2.x

作者：HelloGitHub-追梦人物

欢迎来到 HelloVue-todo-tutorial，这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo（待办事项）应用。

这个教程可以看做是 HelloDjango 系列的番外篇，通过这个教程熟悉 Vue 的基本概念后，我们将使用前后端分离的方式，开发 Django 博客应用。

这个教程还是 HelloVue 系列教程的开篇，这个系列教程将带你循序渐进地深入 Vue，通过实战的形式学习 Vue 开发的方方面面。

同样，本教程完全免费、开源，首发于 HelloGitHub 公众号。

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

在 GitHub 上有 17.4 万 star 排在总榜第三名。（截止本文发布时的统计数据）

如果没看懂上面说的，看着这句就行：Vue.js 是当前最流行的开源前端框架之一，它上手容易、是前端程序员必备技能，学它准没错。

本教程特色

这个教程是完全面向新手的，你可能只了解过一点点的 HTML 知识，花了 10 多分钟看了一点 JavaScript 的基础教程，甚至于你完全不懂什么是 CSS。都没有关系！

这篇教程也不会一上来就先教你配置复杂的前端工程化项目（我在网上搜集的很多教 Vue 开发 Todo 应用的博客都是这么做的），这很容易把一个初学者吓跑。事实上 Vue 不过是一个 JavaScript 库，我们仅仅需要准备一个可以输入代码的文本编辑器和一个现代化的浏览器就可以运行 Vue 应用。因此本教程将抛开繁琐的前端工程化配置过程，所有的代码都将在一个单一的 HTML 文件里编写，用浏览器打开即可运行查看效果，按 F12 就可以进行代码调试。

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

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

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

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

开源项目地址：https://github.com/HelloGitHub-Team/HelloVue-todo-tutorial

好的，让我们准备一个文本编辑器和一个浏览器，然后开始吧！