看到 Vuejs 的第一眼，觉得就算是前端开发经验不多的我，也能轻松地倒腾倒腾。为什么？
- 轻量，核心包很小
- 无依赖
- 学习成本低，Dom-based，双向数据绑定，动态组件
于是乎，我琢磨着搞一个 Todos 应用，功能如下：
Todos.png
当然，css 样式和本地数据持久化就不做了。
什么 MVC 啊，MVVM 都不需要考虑那么多，先写个能通过输入框添加 Todo 的列表：
<script type="text/javascript" src="http://cdn.jsdelivr.net/vue/1.0.16/vue.min.js"></script>
<div id="todos">
<h4>Todos</h4>
<input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="new to do"/>
<ul>
<li v-for="todo in todos">
{{ todo.content }}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: "#todos",
data: {
newTodo: '',
todos: []
},
methods: {
addTodo: function () {
if (this.newTodo == '') { return }
var todo = { done: false, content: this.newTodo }
this.todos.push(todo)
this.newTodo = ''
}
}
})
</script>
简单的几行代码就搞定了，Vuejs 确实挺简洁的：
-
#todos对应一个 Vue 对象 - 在
#todos中可以双向绑定 Vue 对象中的数据 - 在
#todos中可以绑定事件响应函数 - v- 开头的属性中，可以使用 Vue 的 DSL
- 在非 vue 定义的属性中，使用 {{ }} 包裹 Vue 的 DSL
好了，有了这个基础版本，虽然有点太简陋了，但我们可以在此基础上添加新的功能：
- 显示当前剩余未完成的 Todo 的数量
- 显示所有 未完成的Todo/已完成的Todo
- 完成一个 Todo
- 删除一个 Todo
- 删除所有 已完成的Todo
这些不就是对 todos 这个数组的 查询，添加，删除 的操作嘛？于是乎，当 todos 的业务逻辑变得复杂的时候，单单用 Array 这个基本数据类型就不行了，然后就有的所谓的 Model 这一层的抽象。
做好 Model 这一层后，我们响应一些 View上的用户事件如，点击 Todo完成按钮/Todo删除按钮/清除已完成Todo的按钮，变换Todo列表的类型，响应其实就是在当事件发生时执行相应的 Model 操作。 将 View 显示逻辑 和 View 相关的 Model 联系起来所抽象的一层，就是所谓的 ViewModel.
而 Vuejs 所提供的功能之一就是简化 ViewModel 这一层的开发复杂度，或者说提出了一种开发思路及其相应的 api.
最终效果：
my_todos.png
Todos 完整项目演示
所以在 Vuejs 的帮助下，我们可以轻松地以 Model 层的数据为基础，构建相应的 ViewModel.
更多资料：
