--- title: 概述 type: guide order: 2 --- Vue.js（讀音 /vju?/, 類似于 **view**）是一個構建數據驅動的 web 界面的庫。Vue.js 的目標是通過盡可能簡單的 API 實現**響應的數據綁定**和**組合的視圖組件**。 Vue.js 自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動復雜的單頁應用。 如果你是有經驗的前端開發者，想知道 Vue.js 與其它庫/框架的區別，查看[對比其它框架](comparison.html)；如果你對使用 Vue.js 開發大型應用更感興趣，查看[構建大型應用](application.html)。 ## 響應的數據綁定 Vue.js 的核心是一個響應的數據綁定系統，它讓數據與 DOM 保持同步非常簡單。在使用 jQuery 手工操作 DOM 時，我們的代碼常常是命令式的、重復的與易錯的。Vue.js 擁抱**數據驅動的視圖**概念。通俗地講，它意味著我們在普通 HTML 模板中使用特殊的語法將 DOM “綁定”到底層數據。一旦創建了綁定，DOM 將與數據保持同步。每當修改了數據，DOM 便相應地更新。這樣我們應用中的邏輯就幾乎都是直接修改數據了，不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護。  可能是最簡單的例子： ``` html <!-- 這是我們的 View --> <div id="example-1"> Hello {{ name }}! </div> ``` ``` js // 這是我們的 Model var exampleData = { name: 'Vue.js' } // 創建一個 Vue 實例或 "ViewModel" // 它連接 View 與 Model var exampleVM = new Vue({ el: '#example-1', data: exampleData }) ``` 結果： {% 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 %} 看起來這跟單單渲染一個模板非常類似，但是 Vue.js 在背后做了大量工作。并且 DOM 會自動響應數據的變化。我們如何知道？打開你的瀏覽器的控制臺，修改 `exampleData.name`，你將看到上例相應地更新。 注意我們不需要撰寫任何 DOM 操作代碼：被綁定增強的 HTML 模板是底層數據狀態的聲明式的映射，數據不過是普通 JavaScript 對象。我們的視圖完全由數據驅動。 讓我們來看第二個例子： ``` html <div id="example-2"> <p v-if="greeting">Hello!</p> </div> ``` ``` js 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 提供的特殊特性。并且如你所想象的，它們會對綁定的目標元素添加響應式的特殊行為。繼續在控制臺設置 `exampleVM2.greeting` 為 `false`，你會發現 "Hello!" 消失了。 第二個例子演示了我們不僅可以綁定 DOM 文本到數據，也可以綁定 DOM **結構** 到數據。而且，Vue.js 也提供一個強大的過渡效果系統，可以在 Vue 插入/刪除元素時自動應用過渡效果。 也有一些其它指令，每個都有特殊的功能。例如 `v-for` 指令用于顯示數組元素，`v-bind` 指令用于綁定 HTML 特性。我們將在后面詳細討論全部的數據綁定語法。 ## 組件系統 組件系統是 Vue.js 另一個重要概念，因為它提供了一種抽象，讓我們可以用獨立可復用的小組件來構建大型應用。如果我們考慮到這點，幾乎任意類型的應用的界面都可以抽象為一個組件樹：  實際上，一個典型的用 Vue.js 構建的大型應用將形成一個組件樹。在后面的教程中我們將詳述組件，不過這里有一個假想的例子，看看使用了組件的應用模板是什么樣的： ``` html <div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div> ``` 你可能已經注意到 Vue.js 組件非常類似于**自定義元素**——它是 [Web 組件規范](http://www.w3.org/wiki/WebComponents/)的一部分。實際上 Vue.js 的組件語法參考了該規范。例如 Vue 組件實現了 [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) 與 `is` 特性。但是，有幾個關鍵的不同： 1. Web 組件規范仍然遠未完成，并且沒有瀏覽器實現。相比之下，Vue.js 組件不需要任何補丁，并且在所有支持的瀏覽器（IE9 及更高版本）之下表現一致。必要時，Vue.js 組件也可以放在原生自定義元素之內。 2. Vue.js 組件提供了原生自定義元素所不具備的一些重要功能，比如組件間的數據流，自定義事件系統，以及動態的、帶特效的組件替換。 組件系統是用 Vue.js 構建大型應用的基礎。另外，Vue.js 生態系統也提供了高級工具與多種支持庫，它們和 Vue.js 一起構成了一個更加“框架”性的系統。