介紹引言
Vue.js（讀音 /vju?/，類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動。
一、Vue的引入
Vue.js 是極輕量級的前端框架，官方提供了在線地址引入js文件：https://unpkg.com/vue；
我們也可以通過下載官方的文件到本地，在html頁面進(jìn)行引入， Vue.js為開發(fā)版本，包含了完整的調(diào)試和警告信息；Vue.min.js為發(fā)布版本不包含警告和調(diào)試信息；
<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的數(shù)據(jù)驅(qū)動模式折服，html和js數(shù)據(jù)完美融合（就像劍法的最高境界：人劍合一），可以理解為前端的MVVM模式，并且足夠簡潔，如果使用過Angular.js，那么Vue的學(xué)習(xí)將更加容易。
趕緊來看下剛才的實(shí)例用到的語法吧！
（1） Vue實(shí)例，我們針對于元素的操作都將依賴于Vue的實(shí)例，它通過構(gòu)造函數(shù)的形式，來初始化實(shí)例；
（2） el屬性：el相當(dāng)于Vue的DOM選擇器屬性，類似jQuery的選擇器。官方稱它為掛載點(diǎn)，并且不建議直接掛載到html或者body節(jié)點(diǎn)，而是實(shí)際應(yīng)該操作的元素；
（3） data屬性：它表示當(dāng)前掛載點(diǎn)需要的所有數(shù)據(jù)，以Json的結(jié)構(gòu)處理，它允許你定義或者傳入任何Json數(shù)據(jù)（實(shí)例中定義了user實(shí)體，并給它定義了一個(gè)屬性message；
習(xí)慣了jQuery的我，總是想著DOM操作。Vue上手的話，必須扭轉(zhuǎn)這種思維了，它提供了簡潔的API，并以數(shù)據(jù)驅(qū)動，無需直接操作DOM。它是通過特殊的Vue HTML語法和數(shù)據(jù)形成雙向綁定；當(dāng)數(shù)據(jù)發(fā)生變化，DOM將由Vue自動更新。
三、Vue之條件語句，還是直接上代碼！
不過在代碼之前，這次我不得不先把本段用到的語法贅述清楚：
v-if，條件語法，完整模塊為：v-if … v-else-if…v-else…；滿足條件時(shí)，加載條件所在的DOM元素；條件可以是任意bool表達(dá)式，或者data內(nèi)的任意bool屬性；
v-show，單純的改變css的display屬性來控制是否顯示DOM元素，條件同樣是bool表達(dá)式；
v-on:，事件綁定，如v-on:click綁定的是鼠標(biāo)左鍵單擊事件，值為methods下的任意方法；
methods，用來定義掛載點(diǎn)下需要的所有方法；
this，可以理解為當(dāng)前掛載點(diǎn)，可獲取到data下的所有內(nèi)容。
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元素?。?，神奇??！從代碼和操作對比圖可以看出，我點(diǎn)擊按鈕的時(shí)候修改了showUser的值，來判定是否顯示message消息，并控制按鈕的value屬性；從始至終，我并沒有關(guān)注DOM的任何元素，只需要修改數(shù)據(jù)值，不得不說，Vue讓前端變成了數(shù)據(jù)操控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做了綁定，我現(xiàn)在手動鍵入文本框的值。
奇跡出現(xiàn)了，原來的div下的message消息自動跟著變化了，靜態(tài)圖看不到效果，實(shí)際上他是在文本框一邊鍵入，一邊在變化，效果像是onkeydown事件。我現(xiàn)在通過點(diǎn)擊按鈕“change message”來設(shè)定message字段的值，繼續(xù)看奇跡。
哇偶，文本框和消息還是在同步變化。到此處，如果還感受不到vue雙向綁定的魅力，我只能賣給你一塊兒“智商充電寶”了！
四、最后一節(jié)，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風(fēng)格設(shè)計(jì)的，它提供了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名稱是標(biāo)準(zhǔn)的HTTP方法。
POST代碼實(shí)例：
<!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);
}
到此結(jié)束，POST代碼在不做任何解析，如果你能全部看完，恭喜你，本篇文章沒有浪費(fèi)你寶貴的時(shí)間，你Vue已經(jīng)入門了！
http://www.cnblogs.com/elvis-cnblogs/p/7222126.html
延伸閱讀
- webpack教程(二)——webpack.config.js文件 2017-07-26
- 一步一步學(xué)習(xí)Vue（六） 2017-07-26
- Vue.js 基本功能了解 2017-07-25
- Vue 實(shí)際項(xiàng)目中你可能會遇見問題 2017-07-25
- 【Vue】詳解Vue組件系統(tǒng) 2017-07-25
- 一步一步學(xué)Vue(四) 2017-07-25
- 一步一步學(xué)Vue（五） 2017-07-25
- 移動端JS事件、移動端框架 2017-07-25
- 簡單談?wù)刯s中的MVC 2017-07-25
- vue數(shù)據(jù)綁定原理 2017-07-24
一步一步學(xué)習(xí)Vue（六）