上QQ阅读APP看书，第一时间看更新
2.2 实际项目
下面我们看一个实际的例子。这个例子就是SPA的应用：TODO-list，来自于Vue.js的官方。
需求如下：
（1）可以列出代办事项。
（2）可以新增代办事项。
（3）可以把待办事项标记成“已办完”。
该例子的目的是为了让大家对于原生的Vue.js有一个直观的认识，里面的技术细节其实有些复杂，使用了基本的Vue.js知识、Component（组件）、Watcher（监听器）、Computed Properties（计算得到的属性）、Filter（过滤器）等概念。读者暂时不用深究，在第4章Webpack+Vue.js实战中会依次讲解到。
读者只需要对实际的原生项目有所了解即可。
2.2.1 运行整个项目
新建文件index.html，内容如下：
将该文件保存后，使用浏览器直接打开，就可以看到效果。原生Vue.js的TODO-list项目界面如图2-2所示。
图2-2 原生Vue.js的TODO-list项目界面
2.2.2 HTML代码的<head>部分
注释如下所示。
2.2.3 HTML代码的<body>部分
注释如下所示。
2.2.4 js代码部分
注释如下所示。
2.2.5 小结
该例子总共217行，代码精炼、功能齐备。可以看出，使用Vue.js做开发效率非常高。
完整的代码可见：https://cn.vuejs.org/v2/examples/todomvc.html。
但是，一旦项目的需求增加，代码也会越来越膨胀，把html, js和css代码都写在一个文件中不是好主意，所以需要以一种更好的形式来组织文件，这就是Webpack框架下的Vue.js。