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