看到最近很火的vue.js，於是開啟了自己人生中首篇翻譯之路，才意識到這個純英文版的的確沒有中文的通俗易懂~~~~~~不過， 還是硬着頭皮把這篇英文版的博客給翻譯完了，希望可以幫助自己的同時也方便別人。
原文地址：
http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/
附上vue.js中文文檔地址：
http://cn.vuejs.org/
vue.js是一個web接口的構件庫。像其他的工具一樣，你也可以稱它為“框架”，盡管它更像一種用起來很好的可選工具。如果在這之前，你從來沒有聽過或者用過vue，你可能想：太好了，又是一個JavaScript框架！這個我理解。結果是它並不是特別新的框架——2014年2月第一次公開發布，而我大概是在兩年之前就開始使用其原型。它一直在發展，直到今天已經有很多人開始在工作中使用它了。
因此，vue究竟提供些什么呢？又是什么使得它與眾不同？當已經出現Angular、Ember以及React的時候，為什么還有人願意去學習它呢？接下來的這篇文章就通過短暫的vue的介紹來闡明這些問題，而我也希望在讀完這篇文章后你能有自己的答案。
反應：
||在同步中保持狀態和視圖一直貌似是困難的。是吧？
讓我們先從最基本的任務開始吧：顯示數據。假設我們有個簡單的對象：
var object = { message : 'Hello World!'; }
有一個模板：
<div id="example">
{{ message }}
</div>
接下來我們就看一下如何通過vue把數據和模板綁定在一起：
new Vue({ el : '#example', data : object })
看起來我們只是渲染了一個模板。當對象改變的時候我們應該怎樣做來更新視圖？答案就是——什么都不做。vue可以轉換對象並使它有“活性”。當你設定其他對象的object.message時，呈現的HTML會自動更新。更重要的是，根本沒必要擔心像 $apply 超時、setState()、監聽存儲事件或者創建一個私有的框架比如說ko.observable()、Ember.Object.create()等等。它自己就會做這些。
Vue還提供了完美的計算屬性：
var example = new Vue({ data: { a:1 }, computed: { b: function(){ return this.a + 1 } } }) //a和b都是實例創建中的變量 example.a // --> 1 example.b // -->2 example.a++ example.b // -->3
變量b作為a的附屬品，它的變化是自動同步的。因為你沒有必要自己去聲明一個依賴。
另外，基於POJO的反應性使得它非常容易的與任何類型的數據源或者狀態連為一體。例如，這里有監測Vue.js組件綁定到RxJS但不超過30行代碼。
組件
||對於小型的demo，這樣的數據綁定是整齊的，而對於大的應用程序呢？
當涉及到結構復雜的接口，Vue采用的這種方法類似於React：它的分量。
var example = Vue.extend({ template: '<div>{{ message }}</div>', data: function(){ return { message: 'Hello Vue.js!' } } }) //注冊了一個example標簽 Vue.component('example',Example)
現在我們可以使用其他模板中的組件只是作為一份自定義的元素：
<example></example>
組件可以包含其他組件，它們可以形成一棵樹，代表你的UI。讓它們實際上可以自由組合，Vue組件也可以： 1.用props 定義如何從它的父級獲取數據； 2.在父級范圍內發出自定義事件來觸發動作； 3.用<slot>槽構建自己的父級注入相應的內容。 在這里，就不會再繼續深入介紹，但是如果你比較感興趣的話，點擊這里http://vuejs.org/guide/components.html 模型 ||2015年，我們不應該把一切放在全球范圍內。 我們使用模塊化工具（Webpack 或者 Browserify）以及ES2015.每一個組件都可以在它自己的模型中使用。由於Vue可以自動的將對象的屬性轉化為構造器函數，我們可以卡個對象的例子：
// ComponentA.js export default { template: '<div>{{message}}</div>', data () { return { message: 'Hello Vue.js!' } } }
//App.js import ComponentA from './ComponentA' export default{ // 在這個范圍內，使用另一個組件 //用<component-a>標簽將組件A映射進去 components: { ComponentA }, template: - <div> <p>Now I'm using another compoment.</p> <component-a></component-a> </div> - }
相當不錯，對吧？但如果我們可以在同一個文件中封裝組件的模板、風格或者是Javascript的邏輯，並為每個得到適當的高亮顯示豈不是更好？使用類似於Webpack + vue-loader 或者是 Browserify + vueify,你就可以做到：
<!-- MyComponent.vue -->
<!-- css --> <style> .message { color: red; } </style> <!-- template --> <template> <div class="message">{{ message }}</div> </template>
<!-- js --> <script> export default { props: ['message'], created() { console.log('MyComponent created!') } } </script>
別急，我們這是重新發明了Web組件嗎？但前提是你的CSS文件必須是全局的！
除了：
1.你可以有自己的樣式封裝。就在<style>標簽中添加作用於的屬性。但是在它的子組件中是不能嵌套使用的。
2.在IE9之前，每個Vue組件都被編譯成一個Javascript模塊，而不需要任何的東西支撐它運行。如果你想用的話，也可以把它制定成一個真正的元素。
3.ES2015默認支持<script>標簽。
4.你可以在每個語言塊中使用任何預處理器。
5.當你使用Webpack + vue-loader，你也可以使用webpack全功率的靜態資源處理，因為模板和樣式是作為模型依賴通過HTML 以及 CSS 處理URl的。
因此，如果你想要像下面的組件的話：
<vue.js>文件： 這個例子是動態的，我不會做演示……（http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/）
動畫
||我可以用它做些漂亮的東西嗎？ vue有一個非常易於使用的內置過渡系統，許多獲獎的交互式網站都是使用它來建成的。 Vue的反應體系也使得它非常簡單有效的基於狀態的漸變，在使用凌亂的檢查或者是虛擬的DOM迭代計算時卻是相當麻煩的框架。（Vue’s reactivity system also makes it trivially simple to do efficient state-based tweening, which turns out to be quite a hassle in frameworks that use dirty-checking or Virtual DOM diffing.則這句話翻譯的實在繞口！）當漸變的狀態以每秒60幀的時候，Vue清楚的知道哪個綁定會受到影響，因此它會有效的更新綁定事件的影響以及避免其他應用程序不受到影響。在凌亂的檢查和虛擬DOM操作中，改變狀態意味着整個子樹（作用於或者是組件）都會受到影響。也就是需要重新注冊或者是重新呈現。盡管在小demo中個，它被稱作“相當快的”，但是在一個大型應用程序中，它並不會觸發每秒60次改變的事件。即使它控制的足夠快，但是對於整個虛耗的循環它也像是個逐漸消失的電池設備。實際上了解動畫的有效。。。。（Check outthis talk to get a sense how much effort is needed to animate things efficiently in React）Vue應用程序也只是在這些默認情況下是被優化的。
一個基於狀態漸變的Vue例子：
http://codepen.io/yyx990803/pen/XmZNOG/
路由
||如果我想創建一個應用程序，路由又該在哪里設置呢？
類似於React一樣，Vue本身並不帶路由。但是Vue有一個安裝包可以幫你實現。它支持嵌套映射、嵌套組件並且提供細粒度的過渡控制。下面是一個簡單的例子：
import Vue from 'vue' import VueRouter from 'vue-router' import App from './app.vue' import ViewA from './view-a.vue' import ViewB from './view-b.vue' Vue.use(VueRouter) const router = new VueRouter() router.map({ '/a': { component: ViewA }, '/b': { component: ViewB } }) router.start(App, '#app')
app.vue 模板
<div> <h1>This is the layout that won't change</h1> <router-view><!-- matched component renders here --></router-view> </div>
具體的詳見：
（https://github.com/vuejs/vue-hackernews）
穩定性
|| 在一個個人項目中穩定嗎？
是的，它是一個個人項目。因此，如果你正在尋找一個在企業開發團隊的支持下的，Vue可能就不是你要找的。但是我寧願看一下這些數字：自從0.11版本后，Vue在每一個提交版本時一直保持在100%的測試覆蓋率，而這個速度將一直持續下去。GitHub基本也是在13個小時內解決超過1400的問題，而在撰寫文本時，它也是開源（剩下的就都是些數字解釋了，因此沒有繼續翻譯……）
因為之前從來沒有耐心的看過純英文版的文檔，這次算是首開先河吧，不足之處肯定很多，不喜勿噴，只是以后自己還是得多培養一下，看英文文檔的習慣，認真去學新的知識。