走進前端開發之：Vue.js
上一篇中，探討了前端框架的前世今生，最後還列舉了當前比較火的幾個前端框架，比如：Google 的 Angular，老牌的 Backbone , Facebook 的 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">
var demo = new Vue({上面例子的效果是在 input 裡輸入任何內容，會自動出現在 \裡。非常簡單直觀的進行了數據綁定，只要數據發生變化， 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 、 Facebook 這樣公司開發的前端框架。作者在設計框架時，時時刻刻遵循簡單、精巧、易用的設計哲學讓人欽佩。為保證代碼的質量，獲得更多的開發者的信賴，作者的每一行代碼都經過單元測試，體現了作者的嚴謹性。這就是我從他身上學到的東西。
最後，再次給出 Vue.js 的鏈接：http://cn.vuejs.org/
最後的最後，附上上一篇文章：網站被隨機掛廣告，疑似被 HTTP 劫持 裡評論中提到的過濾 HTTP 劫持的 JavaScript 代碼：
<script>document._writeOriginal = document.write;document.write = function(str) {if (str.indexOf('http://blog.coderzh.com/') > -1) {document._writeOriginal(str);
} else { document._writeOriginal('<!-- Be Hijack!! -->');
}
}
</script>上面的代碼放在網站的開頭，為保險，在網站的最後，再加上：
<script>
$('#messagesbsb').remove();</script>走進前端開發系列（鏈接可點）：