走進前端開發之：Vue.js

上一篇中，探討了前端框架的前世今生，最后還列舉了當前比較火的幾個前端框架，比如：Google 的 Angular，老牌的 Backbone , 非死book 的 React 等等。今天，我只想介紹一個小而美的前端框架： Vue.js 。

為什么說 Vue.js 是一個小而美的前端框架呢？因為它小， min 版本大小是 72K （ gzip 壓縮后是23 K），而 min 版本的 Angular 144K，React 132K。說它小而美并不單單指它的體積，因為還有很多體積比它小的框架，小而美主要是它使用起來太 TM 的簡單直觀了！

Vue.js 的中文主頁： http://cn.vuejs.org/

在主頁中，號稱“10 秒鐘看懂 Vue.js”，的確是這么回事：

<div id="demo">
  <p>{{message}}</p>
  <input v-model="message">
</div>

var demo = new Vue({
  el: '#demo',
  data: {
    message: 'Hello Vue.js!'
  }
})

上面例子的效果是在 input 里輸入任何內容，會自動出現在 <p> 里。非常簡單直觀的進行了數據綁定，只要數據發生變化， View 會自動發生變化。這就是數據驅動的。

并不是每個人都需要或者有機會去開發一個大型的 Web 應用，那些流行的框架又需要一定的學習曲線，而且很多功能并不需要使用到。或者說，你只想干一件簡單的事情，但是由于引入了那些框架，使得自己不得不按照框架的規定定義一個又一個東西，最后僅僅是為了實現一個簡單的功能。

所以， Vue.js 非常適合用于一些小型項目（當然，大型項目也適合。），因為可以快速上手，簡單的看下它的文檔就可以開始動手了。而且， Vue.js 的執行速度也非常的快。

在 TodoMVC Benchmark 的評測中，得出的綜合評價：Mercury, Vue and Mithril are king.

在 Safari 6.1, OS X 的評測里，Vue.js 的性能直接排到了第一的位置：

所以，我現在就有沖動拿 Vue.js 來做點東西了，剛好目前要做的一個項目可以用上，這樣可以少寫很多煩人的 JavaScript 代碼了，簡直完美。

Vue.js （讀音 /vju?/, 類似于 view），是一個構建數據驅動的 web 界面的庫。它的作者是個中國人：尤小右，真名尤雨溪，之前在 Google Creative Lab 工作過。正是目睹了 Angular 、 Ember 框架的笨重不夠靈活，Backbone 不支持數據綁定 ， Knockout 和 Ractive 在組件的嵌套和組合上不夠理想，于是他決定自己重新設計一個簡潔的 MVVM 數據綁定的前端框架。

在 GitHub 上， Vue.js 已經收集了 9500 多個 Star，為了讓更多人參與進來貢獻代碼，作者堅持保持代碼測試的覆蓋率為 100% 。

Vue.js 的目標是通過盡可能簡單的 API 實現 響應的數據綁定 和 組合的視圖組件 。

響應的數據綁定就是數據驅動視圖的概念。它讓你在寫 Web 應用界面時，只需要關注兩件事：數據如何展示和數據如何變化。一旦數據發生變化時，比如用戶輸入，或者 ajax 請求返回后數據發現修改，對應的視圖界面會自動的進行更新。（之前的做法是使用 jQuery 手動操作 DOM 更新界面元素。）

定義好數據如何展示，綁定數據后，就只需要關心數據如何變化的事情了，是不是感覺 So Easy ！

組合的視圖組件是 Vue.js 的一個重要概念，有了組件系統，可以很好的復用組件，提高效率，從而也為開發一個大型應用提供了很好的技術保證。

本文并不是要詳細介紹 Vue.js 的特點及使用方法，因為要學習 Vue.js ，看官方的文檔是最好的學習方式。作者是中國人，自帶中文文檔已經足夠方便讓你學習起步。本文的目的只是想介紹 Vue.js ，因為我認為它很了不起。

在如此激烈的前端框架競爭環境下， 憑借作者一己之力，用小而美，精簡易用，性能還那么好的 Vue.js 直接挑戰了像 Google 、 非死book 這樣公司開發的前端框架。作者在設計框架時，時時刻刻遵循簡單、精巧、易用的設計哲學讓人欽佩。為保證代碼的質量，獲得更多的開發者的信賴，作者的每一行代碼都經過單元測試，體現了作者的嚴謹性。這就是我從他身上學到的東西。

最后，再次給出 Vue.js 的鏈接： http://cn.vuejs.org/