Vuejs 初试

看到 Vuejs 的第一眼，觉得就算是前端开发经验不多的我，也能轻松地倒腾倒腾。为什么？

1. 轻量，核心包很小
2. 无依赖
3. 学习成本低，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 确实挺简洁的：

1. #todos 对应一个 Vue 对象
2. 在 #todos 中可以双向绑定 Vue 对象中的数据
3. 在 #todos 中可以绑定事件响应函数
4. v- 开头的属性中，可以使用 Vue 的 DSL
5. 在非 vue 定义的属性中，使用 {{ }} 包裹 Vue 的 DSL

好了，有了这个基础版本，虽然有点太简陋了，但我们可以在此基础上添加新的功能：

1. 显示当前剩余未完成的 Todo 的数量
2. 显示所有 未完成的Todo/已完成的Todo
3. 完成一个 Todo
4. 删除一个 Todo
5. 删除所有 已完成的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.

更多资料：

vuejs.org
Vue.js 框架的作者做客 Teahour