Vue是一個小巧輕便的JavaScript庫挥吵。它有一個簡單易懂的API重父，能夠讓開發(fā)者在開發(fā)web應(yīng)用的時候更加簡易便捷。實(shí)際上忽匈，一直讓Vue引以為豪的是它的便捷性房午、執(zhí)行力、靈活性丹允。
這篇教程的目的就是通過一些例子郭厌，讓你能夠概覽一些基本的概念和特性袋倔。在接下來的其他教程里，你會學(xué)到Vue更多的有用的特性折柠，從而用Vue搭建一個可擴(kuò)展的項(xiàng)目宾娜。
利用new Vue()創(chuàng)建一個Vue實(shí)例
我們可以先初始化一個html頁面，然后我們需要引入Vue 的 js 文件扇售。引入的方式有很多碳默，我們可以在script中引入Vue的cdn，或者去官網(wǎng)上下載Vue的min.js缘眶，或者用 npm 安裝一個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é)省很多時間凑保。
我們先在body里面寫入一個div，并且創(chuàng)建一個Vue實(shí)例涌攻，然后將實(shí)例和div綁定起來欧引。
當(dāng)你創(chuàng)建一個新的Vue實(shí)例的時候要使用Vue()構(gòu)造器，然后在你的實(shí)例中指出你的掛載點(diǎn)恳谎。這個掛載點(diǎn)就是你想要劃分出來的Vue實(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)建一個新的Vue實(shí)例膊升，并設(shè)置掛載點(diǎn)
var V = new Vue({
el : '#vueInstance'
});
</script>
</body>
</html>
就像你在上面看到的那樣蔑舞，new一個Vue()就能創(chuàng)建一個新的實(shí)例亚亲，然后指定一個DOM元素作為實(shí)例的掛載點(diǎn)。定義掛載點(diǎn)的時候乙濒，我們用到了css選擇器的id來定義债查。實(shí)例化的名字也可以自己來定義非区，以便之后調(diào)用。
利用v-model進(jìn)行雙向數(shù)據(jù)綁定
我們可以用v-model對input輸入框進(jìn)行綁定攀操，從而我們可以使用動態(tài)的獲取數(shù)據(jù)對象的值院仿。你可以認(rèn)為v-model是一個指定的屬性，就像html元素的屬性。這里的雙向數(shù)據(jù)綁定可以用在很多表單元素上歹垫，比如input剥汤、textarea、select排惨。
Vue利用v-model這個指令綁定了一個數(shù)據(jù)吭敢，而這個數(shù)據(jù)是我們希望能夠通過用戶輸入操作而更新的數(shù)據(jù)。
比如我們下面這個例子暮芭，我們要在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>
無論用戶輸入多少次辕宏，這個name都會被自動更新畜晰。并且，如果name的值被改變了瑞筐，其他有映射name的地方的值也會被修改凄鼻。
這種input框和映射的同步修改的原因，就是利用v-model這個指令聚假，讓數(shù)據(jù)通過底層的數(shù)據(jù)流進(jìn)行綁定后直接修改块蚌。這就是數(shù)據(jù)的雙向綁定的概念。
為了證明這個概念膘格，我們可以利用$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ì)類型是一個對象瘪贱，所以可以轉(zhuǎn)成json纱控。可以用一個新的對象替換政敢。實(shí)例代理了它的數(shù)據(jù)對象的屬性其徙。
{{}}，利用兩個花括號進(jìn)行插值喷户。這里插入的值是$data實(shí)時變化的值。
| json访锻，只是一個更直觀的能讓數(shù)據(jù)展示出來的方法褪尝。也可以看做是一個過濾器，就像JSON.stringify()的效果一樣期犬。
2中：
{{ name }}河哑，就是直接在插值表達(dá)式，兩個花括號中間插入數(shù)據(jù)變量龟虎，直接映射name的值璃谨。
Vue就是這么簡單的進(jìn)行數(shù)據(jù)的雙向綁定，只需要一個v-model指令就可以，而不需要利用js或者jq來控制數(shù)據(jù)佳吞。相信你能從上面的例子中理清邏輯拱雏。
利用v-on進(jìn)行事件綁定
Vue是利用v-on指令進(jìn)行事件監(jiān)聽和事件分發(fā)的。你可以在Vue的實(shí)例中創(chuàng)建一個方法來綁定監(jiān)聽事件底扳，可以創(chuàng)建一個方法來分派一個點(diǎn)擊事件铸抑。
下面的例子中，我們將創(chuàng)建一個say方法衷模，這個方法綁定在一個button上鹊汛。點(diǎn)擊產(chǎn)生的效果就是彈出一個帶有用戶name的歡迎框。為了將這個方法指派給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)行條件判定
如果我們希望用戶在登錄之后才能看到歡迎彈窗缝裁，而如果沒有登錄則給它一個登錄界面。Vue會提供給我們v-if指令和v-show指令用來控制不同登錄狀態(tài)下的顯示內(nèi)容足绅。
利用先前的例子捷绑，我們可以用loginStatus的值來控制是否登錄，如果是true則顯示輸入框和按鈕讓他能夠看到歡迎彈窗氢妈，但如果是false（即未登錄）粹污，則只能看到輸入賬號、密碼的輸入框和提交按鈕（暫時不進(jìn)行身份驗(yàn)證首量，只改變登錄狀態(tài)）壮吩。
<div id="vueInstance">
//loginStatus為true時會顯示的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時會顯示的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的指向是一個需要自己去搞懂的問題，這里不多說鸭叙。
在上述例子中觉啊，只要把V-if換成v-show，一樣可以獲得等同的效果递雀。同時v-if和v-show他們都支持v-else柄延，但是綁定v-else命令的標(biāo)簽的前一兄弟元素必須有 v-if 或 v-show。
在上面的例子中缀程，只要點(diǎn)擊“登錄”或者“退出登錄”按鈕都會觸發(fā)switchLoginStatus方法搜吧，只要觸發(fā)了這個方法就會導(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 塊時撩满，Vue有一個局部編譯/卸載過程蜒程，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if 是真實(shí)的條件渲染伺帘，因?yàn)樗鼤_保條件塊在切換當(dāng)中合適地銷毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件昭躺。
v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯會被緩存起來）伪嫁。
相比之下领炫，v-show 簡單得多——元素始終被編譯并保留，只是簡單地基于 CSS 切換张咳。
一般來說帝洪，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此脚猾，如果需要頻繁切換 v-show 較好葱峡，如果在運(yùn)行時條件不大可能改變 v-if 較好。
這個差別也許對你目前的開發(fā)來說并不重要龙助，但是你還是要注意和留心砰奕，因?yàn)楫?dāng)你的項(xiàng)目開發(fā)變大的時候，這點(diǎn)會變得重要起來提鸟。
利用v-for輸出列表
如果你是經(jīng)營一個電商平臺的商人的話脆淹，你一定有很多頁面都需要渲染商品列表的輸出。v-for指令允許循環(huán)我們的數(shù)組對象沽一，用 “element in arrayObj” 的方式，念作“循環(huán)arrayObj這個數(shù)據(jù)對象里的每一個element”漓糙。
下面的例子中铣缠，我們將會利用v-for指令循環(huán)輸出一個商品列表。每一個商品都會在一個li中，li中輸出商品的名稱蝗蛙、價格和商品類型蝇庭。
<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ù)組對象里的對應(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)用場景琳拨，一般是在有一個變量的值需要其他變量計(jì)算得到的時候，會用到屯曹。
比如狱庇，例如用戶在輸入框輸入一個數(shù) x，則自動返回給用戶這個數(shù)的平方 x2恶耽。你需要對輸入框進(jìn)行數(shù)據(jù)綁定密任，然后當(dāng)數(shù)據(jù)修改的時候，就馬上計(jì)算它的平方偷俭。
<div id="vueInstance">
輸入一個數(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對象的時候是一樣的。比如square方法是用來計(jì)算變量“square”的社搅，其方法的返回值是兩個this.value的乘積驻债。
接下來可以用computed做一個復(fù)雜一點(diǎn)例子。系統(tǒng)會隨機(jī)取一個110以內(nèi)的數(shù)字形葬，用戶可以在輸入框隨機(jī)輸入一個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 '猜錯了，再來!';
}
}
}
});
</script>
后記
到此為止猖腕，你就已經(jīng)能夠掌握了Vue的基本使用拆祈，世界上最簡潔最漂亮的框架之一，它的構(gòu)建有著自己完整的設(shè)計(jì)思想倘感，而且越來越流行放坏。這個框架足夠小而輕，在你的開發(fā)中會給你帶來更加流暢的用戶體驗(yàn)老玛，并有效提高開發(fā)效率淤年。上文中舉了一系列例子钧敞，都掌握了嗎？
- 利用new Vue()創(chuàng)建一個新的Vue實(shí)例麸粮，并設(shè)置掛載點(diǎn)
- 利用v-model指令對表單控件進(jìn)行雙向綁定
- 了解 $data , {{}} , $index 在輸出數(shù)據(jù)時的用法
- 利用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的一些最新時訊，或者跟我繼續(xù)了解Vue的旅程齐遵。
