本文摘自：http://www.cnblogs.com/keepfool/p/5619070.html
如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先抛開手動操作DOM的思維，因為Vue.js是資料驅動的，你無需手動操作DOM。它通過一些特殊的HTML文法，将DOM和資料綁定起來。一旦你建立了綁定，DOM将和資料保持同步，每當變更了資料，DOM也會相應地更新。
當然了，在使用Vue.js時，你也可以結合其他庫一起使用，比如jQuery。
本文的Demo和源代碼已放到GitHub，如果您覺得本篇内容不錯，請點個贊，或在GitHub上加個星星！
下圖不僅概括了MVVM模式（Model-View-ViewModel），還描述了在Vue.js中ViewModel是如何和View以及Model進行互動的。
ViewModel是Vue.js的核心，它是一個Vue執行個體。Vue執行個體是作用于某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。
當建立了ViewModel後，雙向綁定是如何達成的呢？
首先，我們将上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實作雙向綁定的關鍵。
從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的資料；
從Model側看，當我們更新Model中的資料時，Data Bindings工具會幫我們更新頁面中的DOM元素。
了解一門語言，或者學習一門新技術，編寫Hello World示例是我們的必經之路。
這段代碼在畫面上輸出"Hello World!"。
使用Vue的過程就是定義MVVM各個組成部分的過程的過程。
定義View
定義Model
建立一個Vue執行個體或"ViewModel"，它用于連接配接View和Model
在建立Vue執行個體時，需要傳入一個選項對象，選項對象可以包含資料、挂載元素、方法、模生命周期鈎子等等。
在這個示例中，選項對象的el屬性指向View，<code>el: '#app'</code>表示該Vue執行個體将挂載到<code><div id="app">...</div></code>這個元素；data屬性指向Model，<code>data: exampleData</code>表示我們的Model是exampleData對象。
Vue.js有多種資料綁定的文法，最基礎的形式是文本插值，使用一對大括号文法，在運作時<code>{{ message }}</code>會被資料對象的message屬性替換，是以頁面上會輸出"Hello World!"。
Vue.js已經更新到2.0版本了，但由于還不是正式版，本文的代碼都是1.0.25版本的。
MVVM模式本身是實作了雙向綁定的，在Vue.js中可以使用<code>v-model</code>指令在表單元素上建立雙向資料綁定。
将message綁定到文本框，當更改文本框的值時，<code><p>{{ message }}</p></code> 中的内容也會被更新。
反過來，如果改變message的值，文本框的值也會被更新，我們可以在Chrome控制台進行嘗試。
Vue執行個體的data屬性指向exampleData，它是一個引用類型，改變了exampleData對象的屬性，同時也會影響Vue執行個體的data屬性。
上面用到的<code>v-model</code>是Vue.js常用的一個指令，那麼指令是什麼呢？
Vue.js的指令是以v-開頭的，它們作用于HTML元素，指令提供了一些特殊的特性，将指令綁定在元素上時，指令會為綁定的目标元素添加一些特殊的行為，我們可以将指令看作特殊的HTML特性（attribute）。
Vue.js提供了一些常用的内置指令，接下來我們将介紹以下幾個内置指令：
v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令
Vue.js具有良好的擴充性，我們也可以開發一些自定義的指令，後面的文章會介紹自定義指令。
<code>v-if</code>是條件渲染指令，它根據表達式的真假來删除和插入元素，它的基本文法如下：
expression是一個傳回bool值的表達式，表達式可以是一個bool屬性，也可以是一個傳回bool的運算式。例如：
注意：yes, no, age, name這4個變量都來源于Vue執行個體選項對象的data屬性。
這段代碼使用了4個表達式：
資料的<code>yes</code>屬性為true，是以"Yes!"會被輸出；
資料的<code>no</code>屬性為false，是以"No!"不會被輸出；
運算式<code>age >= 25</code>傳回true，是以"Age: 28"會被輸出；
運算式<code>name.indexOf('jack') >= 0</code>傳回false，是以"Name: keepfool"不會被輸出。
注意：v-if指令是根據條件表達式的值來執行元素的插入或者删除行為。
這一點可以從渲染的HTML源代碼看出來，面上隻渲染了3個<h1>元素，<code>v-if</code>值為false的<h1>元素沒有渲染到HTML。
為了再次驗證這一點，可以在Chrome控制台更改age屬性，使得表達式<code>age >= 25</code>的值為false，可以看到<code><h1>Age: 28</h1></code>元素被删除了。
age是定義在選項對象的data屬性中的，為什麼Vue執行個體可以直接通路它呢？
這是因為每個Vue執行個體都會代理其選項對象裡的data屬性。
<code>v-show</code>也是條件渲染指令，和v-if指令不同的是，使用<code>v-show</code>指令的元素始終會被渲染到HTML，它隻是簡單地為元素設定CSS的style屬性。
在Chrome控制台更改age屬性，使得表達式<code>age >= 25</code>的值為false，可以看到<code><h1>Age: 24</h1></code>元素被設定了style="display:none"樣式。
可以用<code>v-else</code>指令為<code>v-if</code>或<code>v-show</code>添加一個“else塊”。<code>v-else</code>元素必須立即跟在<code>v-if</code>或<code>v-show</code>元素的後面——否則它不能被識别。
<code>v-else</code>元素是否渲染在HTML中，取決于前面使用的是<code>v-if</code>還是<code>v-show</code>指令。
這段代碼中<code>v-if</code>為true，後面的<code>v-else</code>不會渲染到HTML；<code>v-show</code>為tue，但是後面的<code>v-else</code>仍然渲染到HTML了。
<code>v-for</code>指令基于一個數組渲染一個清單，它和JavaScript的周遊文法相似：
items是一個數組，item是目前被周遊的數組元素。
<a>隐藏代碼</a>
我們在選項對象的data屬性中定義了一個people數組，然後在#app元素内使用<code>v-for</code>周遊people數組，輸出每個person對象的姓名、年齡和性别。
<a href="https://keepfool.github.io/vue-tutorials/01.GettingStarted/v-for.html" target="_blank">View Demo</a>
<code>v-bind</code>指令可以在其名稱後面帶一個參數，中間放一個冒号隔開，這個參數通常是HTML元素的特性（attribute），例如：<code>v-bind:class</code>
下面這段代碼建構了一個簡單的分頁條，v-bind指令作用于元素的class特性上。
這個指令包含一個表達式，表達式的含義是：高亮目前頁。
注意<code>v-for="n in pageCount"</code>這行代碼，pageCount是一個整數，周遊時n從0開始，然後周遊到pageCount –1結束。
<a href="https://keepfool.github.io/vue-tutorials/01.GettingStarted/v-bind.html" target="_blank">View Demo</a>
<code>v-on</code>指令用于給監聽DOM事件，它的用文法和v-bind是類似的，例如監聽<a>元素的點選事件：
有兩種形式調用方法：綁定一個方法（讓事件指向方法的引用），或者使用内聯語句。
Greet按鈕将它的單擊事件直接綁定到greet()方法，而Hi按鈕則是調用say()方法。
Vue.js為最常用的兩個指令<code>v-bind</code>和<code>v-on</code>提供了縮寫方式。v-bind指令可以縮寫為一個冒号，v-on指令可以縮寫為@符号。
現在我們已經介紹了一些Vue.js的基礎知識了，結合以上知識我們可以來做個小Demo。
在我的GitHub Pages檢視該Demo：
<a href="https://keepfool.github.io/vue-tutorials/01.GettingStarted/simple-demo.html" target="_blank">View Demo</a>
本文簡單介紹了Vue.js的MVVM模型和它的雙向綁定機制，然後以一個Hello World示例開始了我們的Vue.js之旅，接着我們了解了幾個比較常用的指令，最後根據這些知識我們建構了一個簡單的示例。