看到 Vuejs 的第一眼，覺得就算是前端開發(fā)經(jīng)驗(yàn)不多的我，也能輕松地倒騰倒騰。為什么？

1. 輕量，核心包很小
2. 無依賴
3. 學(xué)習(xí)成本低，Dom-based，雙向數(shù)據(jù)綁定，動(dòng)態(tài)組件

于是乎，我琢磨著搞一個(gè) Todos 應(yīng)用，功能如下：

Todos.png

當(dāng)然，css 樣式和本地?cái)?shù)據(jù)持久化就不做了。

什么 MVC 啊，MVVM 都不需要考慮那么多，先寫個(gè)能通過輸入框添加 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 確實(shí)挺簡潔的：

1. #todos 對(duì)應(yīng)一個(gè) Vue 對(duì)象
2. 在 #todos 中可以雙向綁定 Vue 對(duì)象中的數(shù)據(jù)
3. 在 #todos 中可以綁定事件響應(yīng)函數(shù)
4. v- 開頭的屬性中，可以使用 Vue 的 DSL
5. 在非 vue 定義的屬性中，使用 {{ }} 包裹 Vue 的 DSL

好了，有了這個(gè)基礎(chǔ)版本，雖然有點(diǎn)太簡陋了，但我們可以在此基礎(chǔ)上添加新的功能：

1. 顯示當(dāng)前剩余未完成的 Todo 的數(shù)量
2. 顯示所有 未完成的Todo/已完成的Todo
3. 完成一個(gè) Todo
4. 刪除一個(gè) Todo
5. 刪除所有 已完成的Todo

這些不就是對(duì) todos 這個(gè)數(shù)組的 查詢，添加，刪除 的操作嘛？于是乎，當(dāng) todos 的業(yè)務(wù)邏輯變得復(fù)雜的時(shí)候，單單用 Array 這個(gè)基本數(shù)據(jù)類型就不行了，然后就有的所謂的 Model 這一層的抽象。

做好 Model 這一層后，我們響應(yīng)一些 View上的用戶事件如，點(diǎn)擊 Todo完成按鈕/Todo刪除按鈕/清除已完成Todo的按鈕，變換Todo列表的類型，響應(yīng)其實(shí)就是在當(dāng)事件發(fā)生時(shí)執(zhí)行相應(yīng)的 Model 操作。 將 View 顯示邏輯 和 View 相關(guān)的 Model 聯(lián)系起來所抽象的一層，就是所謂的 ViewModel.

而 Vuejs 所提供的功能之一就是簡化 ViewModel 這一層的開發(fā)復(fù)雜度，或者說提出了一種開發(fā)思路及其相應(yīng)的 api.

最終效果：

my_todos.png

所以在 Vuejs 的幫助下，我們可以輕松地以 Model 層的數(shù)據(jù)為基礎(chǔ)，構(gòu)建相應(yīng)的 ViewModel.

更多資料：

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