看到最近很火的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的問題，而在撰寫文字時，它也是開源（剩下的就都是些數字解釋了，因此沒有繼續翻譯……）
因為之前從來沒有耐心的看過純英文版的文件，這次算是首開先河吧，不足之處肯定很多，不喜勿噴，只是以後自己還是得多培養一下，看英文文件的習慣，認真去學新的知識。