Vue 2.x Todo 教程

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

教程特色

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

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

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

Vue2.x Todo 应用演示

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

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

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

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