Vuejs 初试

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

轻量，核心包很小
无依赖
学习成本低， Dom-based ，双向数据绑定，动态组件

于是乎，我琢磨着搞一个 Todos 应用，功能如下：

当然， 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.

最终效果：

Todos 完整项目演示

所以在 Vuejs 的帮助下，我们可以轻松地以 Model 层的数据为基础，构建相应的 ViewModel.

更多资料：

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