2.2　实际项目

（本节对应的源文件为public/with_external_link_todo.html）

下面我们看一个实际的例子。这是SPA的应用：TODO-list，基本上所有的SPA框架都会用这个做一个Demo。

需求如下：

（1）可以列出待办事项。

（2）可以新增待办事项。

（3）可以把待办事项标记为“已办完”。

该例子的目的是为了让大家对于原生的Vue.js有一个直观的认识，里面的技术细节其实有些复杂，使用了基本的Vue.js知识、Component（组件）、Watcher（监听器）、Computed Properties（计算得到的属性）、Filter（过滤器）等概念。读者暂时不用深究，在第4章Webpack + Vue.js实战中会依次讲解到。

读者只需要对实际的原生项目有所了解即可。