【翻譯】Vue.js 2.0 教程 起步

標籤：ref   jsf   文檔   2.0   控制台   rar   awesome   同步   安裝   

第一次在部落格園上翻譯東西，因為現在還沒有中文的Vue.js2.0文檔，很多英語不好的同學就鬱悶了。以後有時間就翻譯一些，不過等我翻譯完，官方中文文檔肯定就上線了......大家可以開啟英文原網站，因為裡面有些例子可以直接示範。

官方英文文檔連結

本文：

起步什麼是Vue.js？

Vue(發音類似view)是一個緊跟時代潮流的架構，為構建使用者介面而生。不同於其他龐大的架構，Vue的設計是從底層向上逐步遞增的（譯者附：剛開始使用Vue不需要太多依賴）。Vue的核心庫不僅僅聚焦於視圖層，它還非常容易結合其他庫和現存的項目使用。另一方面，當你能夠熟練使用一些流行的工具和Vue提供的外掛程式庫時，Vue也能夠完美的勝任開發複雜且高效能的單頁應用的任務。

如果你是一個老練的前端開發人員，同時想瞭解Vue和其他庫或架構的區別，請點擊這裡。

開始學習

最簡單的方法體驗Vue.js就是嘗試JSFiddle的Hello World例子。隨便在另一個選項卡中開啟這個連結，並跟隨我們去體驗一些基礎樣本。如果你更喜歡從包管理工具下載或安裝Vue.js，查看安裝教程。

響應的資料繫結(Declarative Rendering)

Vue.js 的核心是一個響應的資料繫結系統，它讓資料與 DOM 保持同步非常簡單，只需要使用簡單的模板文法：

HTML<div id="app">  {{ message }}</div>

JSvar app = new Vue({  el: ‘#app‘,  data: {    message: ‘Hello Vue!‘  }})

outPutHello Vue!

我們已經建立好非常nice的第一個Vue app了！它看起來相當小巧，只是渲染一個string模板，但是Vue.js在背後做了大量工作。現在資料和DOM已經綁定了，而且現在所有都是響應的。我們如何知道？開啟你的瀏覽器的控制台，修改 exampleData.name，你將看到上例相應地更新。

注意我們不需要撰寫任何 DOM 作業碼：被綁定增強 HTML 範本是底層資料狀態的聲明式的映射，資料不過是普通 JavaScript 對象。我們的視圖完全由資料驅動。

除了插入文本，我們還可以繫結元素的屬性，像這樣：

HTML<div id="app-2">  <span v-bind:id="id">Inspect me</span></div>

JSvar app2 = new Vue({  el: ‘#app-2‘,  data: {    id: ‘inspect-me‘  }})

outPutInspece me//當前這個span元素的id為"inspect-me"

這裡我們遇到一些新的東西，你看到的v-bind稱之為指令。

 未完...

【翻譯】Vue.js 2.0 教程 起步