[toc]
## 介紹
Vue.js 是一個用于創建 web 交互界面的庫。
從技術角度講，Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過雙向數據綁定把 View 層和 Model 層連接了起來。實際的 DOM 封裝和輸出格式都被抽象為了 Directives 和 Filters。
從哲學角度講，Vue 希望通過一個盡量簡單的 API 來提供反應式的數據綁定和可組合、復用的視圖組件。它不是一個大而全的框架——它只是一個簡單靈活的視圖層。您可以獨立使用它快速開發原型、也可以混合別的庫做更多的事情。它同時和諸如 Firebase 這一類的 BaaS 服務有著天然的契合度。
Vue.js 的 API 設計深受 AngularJS、KnockoutJS、Ractive.js 和 Rivets.js 的影響。盡管有不少相似之處，但我們相信 Vue.js 能夠在簡約和功能之間的微妙平衡中體現出其獨有的價值。
即便您已經熟悉了一些這類的庫或框架，我們還是推薦您繼續閱讀接下來的概覽，因為您對它們的認識也許和它們在 Vue.js 語境下的定義不盡相同。
## 概念綜述
## ViewModel
一個同步 Model 和 View 的對象。在 Vue.js 中，每個 Vue 實例都是一個 ViewModel。它們是通過構造函數 Vue 或其子類被創建出來的。
~~~
var vm = new Vue({ /* options */ })
~~~
這是您作為一個開發者在使用 Vue.js 時主要打交道的對象。更多的細節請移步至 Vue 構造函數。
## 視圖 (View)
被 Vue 實例管理的 DOM 節點。
vm.$el // The View
Vue.js 使用基于 DOM 的模板。每個 Vue 實例都關聯著一個相應的 DOM 元素。當一個 Vue 實例被創建時，它會遞歸遍歷根元素的所有子結點，同時完成必要的數據綁定。當這個視圖被編譯之后，它就會自動響應數據的變化。
在使用 Vue.js 時，除了自定義指令 (稍后會有解釋)，您幾乎不必直接接觸 DOM。當數據發生變化時，視圖將會自動觸發更新。這些更新的粒度精確到一個文字節點。同時為了更好的性能，這些更新是批量異步執行的。
## 模型 (Model)
一個輕微改動過的原生 JavaScript 對象。
~~~
vm.$data // The Model
~~~
Vue.js 中的模型就是普通的 JavaScript 對象——也可以稱為數據對象。一旦某對象被作為 Vue 實例中的數據，它就成為一個 “反應式” 的對象了。你可以操作它們的屬性，同時正在觀察它的 Vue 實例也會收到提示。Vue.js 把數據對象的屬性都轉換成了 ES5 中的 getter/setters，以此達到無縫的數據觀察效果：無需臟值檢查，也不需要刻意給 Vue 任何更新視圖的信號。每當數據變化時，視圖都會在下一幀自動更新。
Vue 實例代理了它們觀察到的數據對象的所有屬性。所以一旦一個對象 { a: 1 } 被觀察，那么 vm.$data.a 和 vm.a 將會返回相同的值，而設置 vm.a = 2 則也會修改 vm.$data。
數據對象是被就地轉化的，所以根據引用修改數據和修改 vm.$data 具有相同的效果。這也意味著多個 Vue 實例可以觀察同一份數據。在較大型的應用程序中，我們也推薦將 Vue 實例作為純粹的視圖看待，同時把數據處理邏輯放在更獨立的外部數據層。
值得提醒的是，一旦數據被觀察，Vue.js 就不會再偵測到新加入或刪除的屬性了。作為彌補，我們會為被觀察的對象增加 $add， $set和 $delete 方法。
下面是對 Vue.js 數據觀測機制實現的高層概覽：
## 指令 (Directives)
帶特殊前綴的 HTML 特性，可以讓 Vue.js 對一個 DOM 元素做各種處理。
~~~
<div v-text="message"></div>
~~~
這里的 div 元素有一個 v-text 指令，其值為 message。Vue.js 會讓該 div 的文本內容與 Vue 實例中的 message 屬性值保持一致。
Directives 可以封裝任何 DOM 操作。比如 v-attr 會操作一個元素的特性；v-repeat 會基于數組來復制一個元素；v-on會綁定事件等。稍后會有更多的介紹。
## Mustache 風格綁定
你也可以使用 mustache 風格的綁定，不管在文本中還是在屬性中。它們在底層會被轉換成 v-text 和 v-attr 的指令。比如：
~~~
<div id="person-{{id}}">Hello {{name}}!</div>
~~~
這很方便，不過有一些注意事項：
- 一個 <image> 的 src 屬性在賦值時會產生一個 HTTP 請求，所以當模板在第一次被解析時會產生一個 404 請求。這種情況下更適合用 v-attr。
- Internet Explorer 在解析 HTML 時會移除非法的內聯 style 屬性，所以如果你想支持 IE，請在綁定內聯 CSS 的時候始終使用 v-style。
你可以使用三對花括號來回避 HTML 代碼，而這種寫法會在底層轉換為 v-html：
~~~
{{{ safeHTMLString }}}
~~~
不過這種用法會留下 XSS 攻擊的隱患，所以建議只對絕對信任的數據來源使用三對花括號的寫法，或者先通過自定義的過濾器 (filter) 對不可信任的 HTML 進行過濾。
最后，你可以在你的 mustache 綁定里加入 * 來注明這是一個一次性撰寫的數據，這樣的話它就不會響應后續的數據變化：
~~~
{{* onlyOnce }}
~~~
## 過濾器 (Filters)
過濾器是用于在更新視圖之前處理原始值的函數。它們通過一個 “管道” 在指令或綁定中進行處理：
~~~
<div>{{message | capitalize}}</div>
~~~
這樣在 div 的文本內容被更新之前，message 的值會先傳給 capitalizie 函數處理。更多內容可移步至深入了解過濾器 (Filters)。
## 組件 (Components)
在 Vue.js，每個組件都是一個簡單的 Vue 實例。一個樹形嵌套的各種組件就代表了你的應用程序的各種接口。通過 Vue.extend 返回的自定義構造函數可以把這些組件實例化，不過更推薦的聲明式的用法是通過 Vue.component(id, constructor) 注冊這些組件。一旦組件被注冊，它們就可以在 Vue 實例的模板中以自定義元素形式使用了。
~~~
<my-component>
`<!-- internals handled by my-component -->
</my-component>
~~~
這個簡單的機制使得我們可以以類似 Web Components 的聲明形式對 Vue 組件進行復用和組合，同時無需最新版的瀏覽器或笨重的 polyfills。通過將一個應用程序拆分成簡單的組件，代碼庫可以被盡可能的解耦，同時更易于維護。更多關于組件的內容，請移步至組件系統。
## 簡單示例
~~~
<div id="demo">
<h1>{{title | uppercase}}</h1>
<ul>
<li
v-repeat="todos"
v-on="click: done = !done"
class="{{done ? 'done' : ''}}">
{{content}}
</li>
</ul>
</div>
~~~
~~~
var demo = new Vue({
el: '#demo',
data: {
title: 'todos',
todos: [
{
done: true,
content: 'Learn JavaScript'
},
{
done: false,
content: 'Learn Vue.js'
}
]
}
})
~~~
**Result**
TODOS
Learn JavaScript
Learn Vue.js
也可以通過 jsfiddle 查看。
你可以點擊一個 todo 來開關它，也可以打開你的瀏覽器命令行直接操作 demo 對象：比如改變 demo.title、向 demo.todos 里放入一個新的對象、或開關某個 todo 的 done 狀態值。
也許你現在腦子里有很多問題，別擔心，我們稍后都會一一提到的。
