Vue是一個(gè)小巧輕便的JavaScript庫。它有一個(gè)簡單易懂的API，能夠讓開發(fā)者在開發(fā)web應(yīng)用的時(shí)候更加簡易便捷。實(shí)際上，一直讓Vue引以為豪的是它的便捷性、執(zhí)行力、靈活性。
這篇教程的目的就是通過一些例子，讓你能夠概覽一些基本的概念和特性。在接下來的其他教程里，你會學(xué)到Vue更多的有用的特性，從而用Vue搭建一個(gè)可擴(kuò)展的項(xiàng)目。
利用new Vue()創(chuàng)建一個(gè)Vue實(shí)例
我們可以先初始化一個(gè)html頁面，然后我們需要引入Vue 的 js 文件。引入的方式有很多，我們可以在script中引入Vue的cdn，或者去官網(wǎng)上下載Vue的min.js，或者用 npm 安裝一個(gè)Vue的依賴。方便起見，本文中就用cdn引入。
<!DOCTYPE html>
<html>
<head>
<title>從零開始學(xué)Vue</title>
</head>
<body>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
</body>
</html>
當(dāng)你在開發(fā)過程中，確保你使用的是沒有壓縮過的版本，因?yàn)闆]有壓縮的版本會提供有用的詳細(xì)的警告，將會給你的代碼書寫節(jié)省很多時(shí)間。
我們先在body里面寫入一個(gè)div，并且創(chuàng)建一個(gè)Vue實(shí)例，然后將實(shí)例和div綁定起來。
當(dāng)你創(chuàng)建一個(gè)新的Vue實(shí)例的時(shí)候要使用Vue()構(gòu)造器，然后在你的實(shí)例中指出你的掛載點(diǎn)。這個(gè)掛載點(diǎn)就是你想要?jiǎng)澐殖鰜淼腣ue實(shí)例的邊界。掛載點(diǎn)和實(shí)例邊界是一一對應(yīng)的，你只能在掛載點(diǎn)上處理你實(shí)例邊界內(nèi)的事務(wù)，而不能在你的掛載點(diǎn)上處理實(shí)例邊界外的事務(wù)。
在Vue實(shí)例中設(shè)置掛載點(diǎn)的參數(shù)是 “ el ”，el 的值可以用dom元素定義。
<!DOCTYPE html>
<html>
<head>
<title>從零開始學(xué)Vue</title>
</head>
<body>
<div id="vueInstance">這中間就是實(shí)例掛載點(diǎn)的實(shí)例邊界</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<script>
// 創(chuàng)建一個(gè)新的Vue實(shí)例，并設(shè)置掛載點(diǎn)
var V = new Vue({
el : '#vueInstance'
});
</script>
</body>
</html>
就像你在上面看到的那樣，new一個(gè)Vue()就能創(chuàng)建一個(gè)新的實(shí)例，然后指定一個(gè)DOM元素作為實(shí)例的掛載點(diǎn)。定義掛載點(diǎn)的時(shí)候，我們用到了css選擇器的id來定義。實(shí)例化的名字也可以自己來定義，以便之后調(diào)用。
利用v-model進(jìn)行雙向數(shù)據(jù)綁定
我們可以用v-model對input輸入框進(jìn)行綁定，從而我們可以使用動態(tài)的獲取數(shù)據(jù)對象的值。你可以認(rèn)為v-model是一個(gè)指定的屬性，就像html元素的屬性。這里的雙向數(shù)據(jù)綁定可以用在很多表單元素上，比如input、textarea、select。
Vue利用v-model這個(gè)指令綁定了一個(gè)數(shù)據(jù)，而這個(gè)數(shù)據(jù)是我們希望能夠通過用戶輸入操作而更新的數(shù)據(jù)。
比如我們下面這個(gè)例子，我們要在input標(biāo)簽上綁定數(shù)據(jù)name，我們需要在Vue實(shí)例中的data對象中實(shí)現(xiàn)聲明。
<div id="vueInstance">
輸入您的姓名: <input type="text" v-model="name">
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>//之后這行會省略
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian'
}
});
</script>
無論用戶輸入多少次，這個(gè)name都會被自動更新。并且，如果name的值被改變了，其他有映射name的地方的值也會被修改。
這種input框和映射的同步修改的原因，就是利用v-model這個(gè)指令，讓數(shù)據(jù)通過底層的數(shù)據(jù)流進(jìn)行綁定后直接修改。這就是數(shù)據(jù)的雙向綁定的概念。
為了證明這個(gè)概念，我們可以利用$data打印出數(shù)據(jù)的映射來看看。
<div id="vueInstance">
輸入您的姓名: <input type="text" v-model="name">
<p>{{ $data | json }}</p> //#1
<p>{{ name }}</p> //#2
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian'
}
});
</script>
1中：
$data是Vue實(shí)例觀察的數(shù)據(jù)對象，本質(zhì)類型是一個(gè)對象，所以可以轉(zhuǎn)成json。可以用一個(gè)新的對象替換。實(shí)例代理了它的數(shù)據(jù)對象的屬性。
{{}}，利用兩個(gè)花括號進(jìn)行插值。這里插入的值是$data實(shí)時(shí)變化的值。
| json，只是一個(gè)更直觀的能讓數(shù)據(jù)展示出來的方法。也可以看做是一個(gè)過濾器，就像JSON.stringify()的效果一樣。
2中：
{{ name }}，就是直接在插值表達(dá)式，兩個(gè)花括號中間插入數(shù)據(jù)變量，直接映射name的值。
Vue就是這么簡單的進(jìn)行數(shù)據(jù)的雙向綁定，只需要一個(gè)v-model指令就可以，而不需要利用js或者jq來控制數(shù)據(jù)。相信你能從上面的例子中理清邏輯。
利用v-on進(jìn)行事件綁定
Vue是利用v-on指令進(jìn)行事件監(jiān)聽和事件分發(fā)的。你可以在Vue的實(shí)例中創(chuàng)建一個(gè)方法來綁定監(jiān)聽事件，可以創(chuàng)建一個(gè)方法來分派一個(gè)點(diǎn)擊事件。
下面的例子中，我們將創(chuàng)建一個(gè)say方法，這個(gè)方法綁定在一個(gè)button上。點(diǎn)擊產(chǎn)生的效果就是彈出一個(gè)帶有用戶name的歡迎框。為了將這個(gè)方法指派給button，我們需要用v-on:click來進(jìn)行事件綁定。
<div id="vueInstance">
輸入您的姓名: <input type="text" v-model="name">
<button v-on:click="say">歡迎點(diǎn)擊</button> //#1
<button @click="say">歡迎點(diǎn)擊</button> //#2
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian'
},
methods : {
say : function(){
alert('歡迎' + this.name);
}
}
});
</script>
當(dāng)然了，不僅是可以綁定click點(diǎn)擊事件，還可以綁定其他鼠標(biāo)事件，鍵盤輸入事件等一些js的事件類型。比如v-on:mouseover，v-on:keydown， v-on:submit， v-on:keypress，v-on:keyup.13等等，或者是一些其他的自定義事件。
在開發(fā)過程中，你可能會頻繁的用到事件綁定，v-on寫起來有點(diǎn)麻煩，所以上例中提供了兩種寫法，#2就是對#1寫法的縮寫。利用@代替v-on，這里不多說。
利用v-if或者v-show進(jìn)行條件判定
如果我們希望用戶在登錄之后才能看到歡迎彈窗，而如果沒有登錄則給它一個(gè)登錄界面。Vue會提供給我們v-if指令和v-show指令用來控制不同登錄狀態(tài)下的顯示內(nèi)容。
利用先前的例子，我們可以用loginStatus的值來控制是否登錄，如果是true則顯示輸入框和按鈕讓他能夠看到歡迎彈窗，但如果是false（即未登錄），則只能看到輸入賬號、密碼的輸入框和提交按鈕（暫時(shí)不進(jìn)行身份驗(yàn)證，只改變登錄狀態(tài)）。
<div id="vueInstance">
//loginStatus為true時(shí)會顯示的section
<section v-if="loginStatus">
輸入您的姓名: <input type="text" v-model="name">
<button v-on:click="say">歡迎點(diǎn)擊</button>
<button @click="switchLoginStatus">退出登錄</button>
</section>
//loginStatus為false時(shí)會顯示的section
<section v-if="!loginStatus">
登錄用戶: <input type="text">
登錄密碼: <input type="password">
<button @click="switchLoginStatus">登錄</button>
</section>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
name : '_Appian',
loginStatus : false
},
methods : {
say : function(){
alert('歡迎' + this.name);
},
switchLoginStatus : function(){
this.loginStatus = !this.loginStatus;
}
}
});
</script>
this的執(zhí)行就是實(shí)例V。this的指向是一個(gè)需要自己去搞懂的問題，這里不多說。
在上述例子中，只要把V-if換成v-show，一樣可以獲得等同的效果。同時(shí)v-if和v-show他們都支持v-else，但是綁定v-else命令的標(biāo)簽的前一兄弟元素必須有 v-if 或 v-show。
在上面的例子中，只要點(diǎn)擊“登錄”或者“退出登錄”按鈕都會觸發(fā)switchLoginStatus方法，只要觸發(fā)了這個(gè)方法就會導(dǎo)致loginStatus的狀態(tài)變化（在true和false中進(jìn)行切換），從而改變了html中的v-if的判斷條件結(jié)果的變化，基于當(dāng)前的loginStatus的布爾值的狀態(tài)，使得顯示的section是不同狀態(tài)下的section。
v-show和v-if之間有什么區(qū)別呢?
在切換 v-if 塊時(shí)，Vue有一個(gè)局部編譯/卸載過程，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if 是真實(shí)的條件渲染，因?yàn)樗鼤_保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開始局部編譯（編譯會被緩存起來）。
相比之下，v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好。
這個(gè)差別也許對你目前的開發(fā)來說并不重要，但是你還是要注意和留心，因?yàn)楫?dāng)你的項(xiàng)目開發(fā)變大的時(shí)候，這點(diǎn)會變得重要起來。
利用v-for輸出列表
如果你是經(jīng)營一個(gè)電商平臺的商人的話，你一定有很多頁面都需要渲染商品列表的輸出。v-for指令允許循環(huán)我們的數(shù)組對象，用 “element in arrayObj” 的方式，念作“循環(huán)arrayObj這個(gè)數(shù)據(jù)對象里的每一個(gè)element”。
下面的例子中，我們將會利用v-for指令循環(huán)輸出一個(gè)商品列表。每一個(gè)商品都會在一個(gè)li中，li中輸出商品的名稱、價(jià)格和商品類型。
<div id="vueInstance">
<ul>
<li v-for="el in products">
{{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>
</ul>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
products : [
{name: 'microphone', price: 25, category: 'electronics'},
{name: 'laptop case', price: 15, category: 'accessories'},
{name: 'screen cleaner', price: 17, category: 'accessories'},
{name: 'laptop charger', price: 70, category: 'electronics'},
{name: 'mouse', price: 40, category: 'electronics'},
{name: 'earphones', price: 20, category: 'electronics'},
{name: 'monitor', price: 120, category: 'electronics'}
]
}
});
</script>
當(dāng)然了，data中的數(shù)組對象，可以不用像上面這樣定義也可以，我們可以從數(shù)據(jù)庫導(dǎo)入，或者是利用ajax請求得到。這里只是為了演示v-for。
有時(shí)候我們可能會需要拿到商品在數(shù)組對象里的對應(yīng)下標(biāo)。我們可以用$index來獲得。
//#1
<li v-for="el in products">
{{ $index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>
//#2
<li v-for="(index,el) in products">
{{ index }} - {{ el.name }} - ￥ {{ el. price }} - {{ el. category }}
</li>
計(jì)算屬性Computed
計(jì)算屬性的應(yīng)用場景，一般是在有一個(gè)變量的值需要其他變量計(jì)算得到的時(shí)候，會用到。
比如，例如用戶在輸入框輸入一個(gè)數(shù) x，則自動返回給用戶這個(gè)數(shù)的平方 x2。你需要對輸入框進(jìn)行數(shù)據(jù)綁定，然后當(dāng)數(shù)據(jù)修改的時(shí)候，就馬上計(jì)算它的平方。
<div id="vueInstance">
輸入一個(gè)數(shù)字: <input type="text" v-model="value">
<p>計(jì)算結(jié)果：{{ square }}</p>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
value : 1
},
computed : {
square : function(){
return this.value * this.value;
}
}
});
</script>
計(jì)算屬性定義數(shù)值是通過定義一系列的function，就像我們先前定義methods對象的時(shí)候是一樣的。比如square方法是用來計(jì)算變量“square”的，其方法的返回值是兩個(gè)this.value的乘積。
接下來可以用computed做一個(gè)復(fù)雜一點(diǎn)例子。系統(tǒng)會隨機(jī)取一個(gè)110以內(nèi)的數(shù)字，用戶可以在輸入框隨機(jī)輸入一個(gè)110之內(nèi)的數(shù)字，如果剛好用戶的輸入和系統(tǒng)的隨機(jī)數(shù)剛好匹配，則游戲成功，反之失敗。
<div id="vueInstance">
輸入1~10內(nèi)的數(shù)字: <input type="text" v-model="value">
<p>計(jì)算結(jié)果：{{ resultMsg }}</p>
</div>
<script>
var V = new Vue({
el : '#vueInstance',
data : {
value : null,
randNum : 5//第一次隨機(jī)數(shù)為5
},
methods : {
getRandNum: function(min, max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
},
computed : {
resultMsg : function(){
if (this.value == this.randNum) {
this.randNum = this.getRandNum(1, 10);
return '你猜對了!';
} else {
this.randNum = this.getRandNum(1, 10);
return '猜錯(cuò)了，再來!';
}
}
}
});
</script>
后記
到此為止，你就已經(jīng)能夠掌握了Vue的基本使用，世界上最簡潔最漂亮的框架之一，它的構(gòu)建有著自己完整的設(shè)計(jì)思想，而且越來越流行。這個(gè)框架足夠小而輕，在你的開發(fā)中會給你帶來更加流暢的用戶體驗(yàn)，并有效提高開發(fā)效率。上文中舉了一系列例子，都掌握了嗎？
- 利用new Vue()創(chuàng)建一個(gè)新的Vue實(shí)例，并設(shè)置掛載點(diǎn)
- 利用v-model指令對表單控件進(jìn)行雙向綁定
- 了解 $data , {{}} , $index 在輸出數(shù)據(jù)時(shí)的用法
- 利用v-on進(jìn)行事件綁定，methods的用法
- 結(jié)合v-on，利用v-if或者v-show進(jìn)行條件判定，并了解區(qū)別
- 利用v-for循環(huán)輸出列表
- 計(jì)算屬性Computed的基本應(yīng)用
現(xiàn)在你已經(jīng)基本掌握了Vue的基礎(chǔ)。接下來你要做的就是多看看Vue的一些最新時(shí)訊，或者跟我繼續(xù)了解Vue的旅程。
