介紹引言
Vue.js（讀音 /vjuː/，類似於 view） 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠為復雜的單頁應用程序提供驅動。
一、Vue的引入
Vue.js 是極輕量級的前端框架，官方提供了在線地址引入js文件：https://unpkg.com/vue；
我們也可以通過下載官方的文件到本地，在html頁面進行引入， Vue.js為開發版本，包含了完整的調試和警告信息；Vue.min.js為發布版本不包含警告和調試信息；
<head> <meta name="viewport" content="width=device-width" /> <title>MyVue</title> <!--引入官方在線js文件--> <script src="https://unpkg.com/vue"></script> <!--引入本地vue.js文件--> <script src="/Scripts/vue.js"></script> </head>
二、Vue之Hello World！話不多說，直接上Code
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>MyVue</title> <!--引入本地vue.js文件--> <script src="/Scripts/vue.js"></script> </head> <body> <div id="app"> {{user.message}} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { user:{message:'Hello Vue !'} } }); </script> </body> </html>
寫完這段，不得不為Vue的數據驅動模式折服，html和js數據完美融合（就像劍法的最高境界：人劍合一），可以理解為前端的MVVM模式，並且足夠簡潔，如果使用過Angular.js，那么Vue的學習將更加容易。
趕緊來看下剛才的實例用到的語法吧！
（1） Vue實例，我們針對於元素的操作都將依賴於Vue的實例，它通過構造函數的形式，來初始化實例；
（2） el屬性：el相當於Vue的DOM選擇器屬性，類似jQuery的選擇器。官方稱它為掛載點，並且不建議直接掛載到html或者body節點，而是實際應該操作的元素；
（3） data屬性：它表示當前掛載點需要的所有數據，以Json的結構處理，它允許你定義或者傳入任何Json數據（實例中定義了user實體，並給它定義了一個屬性message；
習慣了jQuery的我，總是想着DOM操作。Vue上手的話，必須扭轉這種思維了，它提供了簡潔的API，並以數據驅動，無需直接操作DOM。它是通過特殊的Vue HTML語法和數據形成雙向綁定；當數據發生變化，DOM將由Vue自動更新。
三、Vue之條件語句，還是直接上代碼！
不過在代碼之前，這次我不得不先把本段用到的語法贅述清楚：
v-if，條件語法，完整模塊為：v-if … v-else-if…v-else…；滿足條件時，加載條件所在的DOM元素；條件可以是任意bool表達式，或者data內的任意bool屬性；
v-show，單純的改變css的display屬性來控制是否顯示DOM元素，條件同樣是bool表達式；
v-on:，事件綁定，如v-on:click綁定的是鼠標左鍵單擊事件，值為methods下的任意方法；
methods，用來定義掛載點下需要的所有方法；
this，可以理解為當前掛載點，可獲取到data下的所有內容。
v-bind:，DOM元素的屬性綁定，如v-bind:value綁定的是DOM元素的value屬性，值可以是data下的任意字段，注意，bind為 單向綁定；
v-model，表單控件的綁定，如文本框上的v-model則會綁定到value屬性，值同樣是支持data的任意字段；
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>MyVue</title> <!--引入本地vue.js文件--> <script src="/Scripts/vue.js"></script> </head> <body> <div id="app"> <input type="button" v-bind:value="value" v-on:click="show" /> <div v-if="showUser">{{user.message}}</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { user:{message:'Hello Vue !'}, showUser:false, value:'show' }, methods:{ show:function(){ this.showUser=!this.showUser; this.value=this.showUser?'hide':'show'; } } }); </script> </body> </html>
Word 天！跪服Vue，我只要改變了data.showUser的值，DOM自動變化（並不是簡單的操作了css的display屬性，而是改變了DOM元素！），神奇啊！從代碼和操作對比圖可以看出，我點擊按鈕的時候修改了showUser的值，來判定是否顯示message消息，並控制按鈕的value屬性；從始至終，我並沒有關注DOM的任何元素，只需要修改數據值，不得不說，Vue讓前端變成了數據操控DOM。作為沒有用過Angular.js的我來說，不敢想象原來jQuery的寫法的繁雜程度，簡直是震驚了！如果屏幕前的你還沒有從靈魂上感受到什么是雙向綁定，再來看下面的例子！
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>MyVue</title> <!--引入本地vue.js文件--> <script src="/Scripts/vue.js"></script> </head> <body> <div id="app"> <input type="button" v-model="value" v-on:click="show" /> <br /> <br /> <input type="text" v-model="user.message" /> <input type="button" v-on:click="change" value="change message" /> <div v-if="showUser">{{user.message}}</div> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { user:{message:'Hello Vue !'}, showUser:true, value:'hide' }, methods:{ show:function(){ this.showUser=!this.showUser; this.value=this.showUser?'hide':'show'; }, change:function(){ this.user.message='I am vue.js .'; } } }); </script> </body> </html>
上圖是文本框的初始值，它的value和user.message做了綁定，我現在手動鍵入文本框的值。
奇跡出現了，原來的div下的message消息自動跟着變化了，靜態圖看不到效果，實際上他是在文本框一邊鍵入，一邊在變化，效果像是onkeydown事件。我現在通過點擊按鈕“change message”來設定message字段的值，繼續看奇跡。
哇偶，文本框和消息還是在同步變化。到此處，如果還感受不到vue雙向綁定的魅力，我只能賣給你一塊兒“智商充電寶”了！
四、最后一節，Vue之http請求
寫到這里，很遺憾的告訴大家， Vue.js僅僅是View層面的東西，並不包含http請求的模塊，我們需要借助jQuery或者vue-rsource.js
Github下載：
GitHub - pagekit/vue-resource: The HTTP client for Vue.js
https://github.com/pagekit/vue-resource
語法：vue-resource的請求API是按照REST風格設計的，它提供了7種請求API：
- get(url, [options])
- head(url, [options])
- delete(url, [options])
- jsonp(url, [options])
- post(url, [body], [options])
- put(url, [body], [options])
- patch(url, [body], [options])
除了jsonp以外，另外6種的API名稱是標准的HTTP方法。
POST代碼實例：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>MyVue</title> <!--引入本地vue.js文件--> <script src="/Scripts/vue.js"></script> <!--引入vue-resource.js--> <script src="/Scripts/vue-resource.js"></script> </head> <body> <div id="app"> UserName:<input type="text" name="UserName" v-model="params.name" /><span style="color:red;">*</span> <span style="color:red;" v-if="isEmpty">UserName 必填！</span> <span v-if="user.UserName">{{user.UserName}}: {{user.Message}}</span> <br /> <input type="button" value="show" v-on:click="show" /> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { user: { UserName: null, Message: null }, params: { name: null }, isEmpty: false }, methods: { show: function () { if (!this.params.name) { this.isEmpty = true; return; } this.isEmpty = false; this.$http.post('/Home/GetUser', this.params).then( function (result) {//success this.user = result.data; }, function (result) {//error } ); } } }); </script> </body> </html>
后台代碼（HomeController下的Action：GetUser）：
public JsonResult GetUser(string name) { UserInfo user = new UserInfo() { Message = "Hello Vue.js !", UserName = name }; return Json(user); }
到此結束，POST代碼在不做任何解析，如果你能全部看完，恭喜你，本篇文章沒有浪費你寶貴的時間，你Vue已經入門了！