Vue.js（讀音 /vju?/, 類似于 view）是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的庫。Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue.js 自身不是一個(gè)全能框架——它只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，在與相關(guān)工具和支持庫一起使用時(shí)，Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁應(yīng)用。

如果你是有經(jīng)驗(yàn)的前端開發(fā)者，想知道 Vue.js 與其它庫/框架的區(qū)別，查看對(duì)比其它框架；如果你對(duì)使用 Vue.js 開發(fā)大型應(yīng)用更感興趣，查看構(gòu)建大型應(yīng)用。

響應(yīng)的數(shù)據(jù)綁定

Vue.js 的核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它讓數(shù)據(jù)與 DOM 保持同步非常簡(jiǎn)單。在使用 jQuery 手工操作 DOM 時(shí)，我們的代碼常常是命令式的、重復(fù)的與易錯(cuò)的。Vue.js 擁抱數(shù)據(jù)驅(qū)動(dòng)的視圖概念。通俗地講，它意味著我們?cè)谄胀?HTML 模板中使用特殊的語法將 DOM “綁定”到底層數(shù)據(jù)。一旦創(chuàng)建了綁定，DOM 將與數(shù)據(jù)保持同步。每當(dāng)修改了數(shù)據(jù)，DOM 便相應(yīng)地更新。這樣我們應(yīng)用中的邏輯就幾乎都是直接修改數(shù)據(jù)了，不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護(hù)。

http://wiki.jikexueyuan.com/project/vue-js-1.0/images/mvvm.png" alt="MVVM" />

可能是最簡(jiǎn)單的例子：

<!-- 這是我們的 View -->
<div id="example-1">
  Hello {{ name }}!
</div>

// 這是我們的 Model
var exampleData = {
  name: 'Vue.js'
}

// 創(chuàng)建一個(gè) Vue 實(shí)例或 "ViewModel"
// 它連接 View 與 Model
var exampleVM = new Vue({
  el: '#example-1',
  data: exampleData
})

結(jié)果：

{% raw %}
<div id="example-1" class="demo">Hello {{ name }}!</div>
<script>
var exampleData = {
  name: 'Vue.js'
}
var exampleVM = new Vue({
  el: '#example-1',
  data: exampleData
})
</script>
{% endraw %}

看起來這跟單單渲染一個(gè)模板非常類似，但是 Vue.js 在背后做了大量工作。并且 DOM 會(huì)自動(dòng)響應(yīng)數(shù)據(jù)的變化。我們?nèi)绾沃溃看蜷_你的瀏覽器的控制臺(tái)，修改 exampleData.name，你將看到上例相應(yīng)地更新。

注意我們不需要撰寫任何 DOM 操作代碼：被綁定增強(qiáng)的 HTML 模板是底層數(shù)據(jù)狀態(tài)的聲明式的映射，數(shù)據(jù)不過是普通 JavaScript 對(duì)象。我們的視圖完全由數(shù)據(jù)驅(qū)動(dòng)。

讓我們來看第二個(gè)例子：

<div id="example-2">
  <p v-if="greeting">Hello!</p>
</div>

var exampleVM2 = new Vue({
  el: '#example-2',
  data: {
    greeting: true
  }
})

{% raw %}
<div id="example-2" class="demo">
  <span v-if="greeting">Hello!</span>
</div>
<script>
var exampleVM2 = new Vue({
  el: '#example-2',
  data: {
    greeting: true
  }
})
</script>
{% endraw %}

這里我們遇到新東西。你看到的 v-if 特性被稱為指令。指令帶有前綴 v-，以指示它們是 Vue.js 提供的特殊特性。并且如你所想象的，它們會(huì)對(duì)綁定的目標(biāo)元素添加響應(yīng)式的特殊行為。繼續(xù)在控制臺(tái)設(shè)置 exampleVM2.greeting 為 false，你會(huì)發(fā)現(xiàn) "Hello!" 消失了。

第二個(gè)例子演示了我們不僅可以綁定 DOM 文本到數(shù)據(jù)，也可以綁定 DOM 結(jié)構(gòu) 到數(shù)據(jù)。而且，Vue.js 也提供一個(gè)強(qiáng)大的過渡效果系統(tǒng)，可以在 Vue 插入/刪除元素時(shí)自動(dòng)應(yīng)用過渡效果。

也有一些其它指令，每個(gè)都有特殊的功能。例如 v-for 指令用于顯示數(shù)組元素，v-bind 指令用于綁定 HTML 特性。我們將在后面詳細(xì)討論全部的數(shù)據(jù)綁定語法。

組件系統(tǒng)

組件系統(tǒng)是 Vue.js 另一個(gè)重要概念，因?yàn)樗峁┝艘环N抽象，讓我們可以用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用。如果我們考慮到這點(diǎn)，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹：

http://wiki.jikexueyuan.com/project/vue-js-1.0/images/components.png" alt="Component Tree" />

實(shí)際上，一個(gè)典型的用 Vue.js 構(gòu)建的大型應(yīng)用將形成一個(gè)組件樹。在后面的教程中我們將詳述組件，不過這里有一個(gè)假想的例子，看看使用了組件的應(yīng)用模板是什么樣的：

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

你可能已經(jīng)注意到 Vue.js 組件非常類似于自定義元素——它是 Web 組件規(guī)范的一部分。實(shí)際上 Vue.js 的組件語法參考了該規(guī)范。例如 Vue 組件實(shí)現(xiàn)了 Slot API 與 is 特性。但是，有幾個(gè)關(guān)鍵的不同：

Web 組件規(guī)范仍然遠(yuǎn)未完成，并且沒有瀏覽器實(shí)現(xiàn)。相比之下，Vue.js 組件不需要任何補(bǔ)丁，并且在所有支持的瀏覽器（IE9 及更高版本）之下表現(xiàn)一致。必要時(shí)，Vue.js 組件也可以放在原生自定義元素之內(nèi)。
Vue.js 組件提供了原生自定義元素所不具備的一些重要功能，比如組件間的數(shù)據(jù)流，自定義事件系統(tǒng)，以及動(dòng)態(tài)的、帶特效的組件替換。

組件系統(tǒng)是用 Vue.js 構(gòu)建大型應(yīng)用的基礎(chǔ)。另外，Vue.js 生態(tài)系統(tǒng)也提供了高級(jí)工具與多種支持庫，它們和 Vue.js 一起構(gòu)成了一個(gè)更加“框架”性的系統(tǒng)。

上一篇：構(gòu)建大型應(yīng)用下一篇：混合