Vue.js——60分鐘快速入門
是當下很火的(de)(de)(de)一個(ge)JavaScript MVVM庫，它是以數據驅動和組(zu)件化(hua)的(de)(de)(de)思(si)想構(gou)建的(de)(de)(de)。相比于Angular.js，Vue.js提供了更(geng)加簡潔、更(geng)易于理解的(de)(de)(de)API，使得我們(men)能夠(gou)快速地上手并使用Vue.js。
本文摘自：//www.cnblogs.com/keepfool/p/5619070.html
如果你(ni)(ni)之前已(yi)經習慣了用(yong)jQuery操作(zuo)DOM，學習Vue.js時請先(xian)拋開(kai)手動操作(zuo)DOM的思維(wei)，因為Vue.js是數(shu)據(ju)(ju)驅動的，你(ni)(ni)無需手動操作(zuo)DOM。它通過一些特殊的HTML語(yu)法，將(jiang)(jiang)DOM和數(shu)據(ju)(ju)綁(bang)定起(qi)來。一旦(dan)你(ni)(ni)創建了綁(bang)定，DOM將(jiang)(jiang)和數(shu)據(ju)(ju)保(bao)持同步(bu)，每當(dang)變更(geng)了數(shu)據(ju)(ju)，DOM也會相(xiang)應地(di)更(geng)新(xin)。
當然了，在使(shi)用Vue.js時，你也可以結(jie)合其他庫(ku)一(yi)起(qi)使(shi)用，比如jQuery。
本(ben)文的Demo和源代碼已放(fang)到(dao)GitHub，如(ru)果您覺(jue)得本(ben)篇內(nei)容不錯，請點個贊(zan)，或在GitHub上加(jia)個星星！
MVVM模式
下圖不僅概(gai)括(kuo)了MVVM模式(shi)（Model-View-ViewModel），還描(miao)述了在(zai)Vue.js中(zhong)ViewModel是如何和(he)View以(yi)及Model進行交互的。
ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是作用于某(mou)一(yi)個(ge)(ge)HTML元(yuan)(yuan)素(su)上(shang)的，這個(ge)(ge)元(yuan)(yuan)素(su)可(ke)以(yi)是HTML的body元(yuan)(yuan)素(su)，也可(ke)以(yi)是指定(ding)了id的某(mou)個(ge)(ge)元(yuan)(yuan)素(su)。
當創建(jian)了ViewModel后，雙向綁(bang)定(ding)是如何達成的(de)呢？
首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實現雙向綁定的關鍵。
從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的數據；
從Model側看，當我們更新Model中(zhong)的(de)數據(ju)時(shi)，Data Bindings工(gong)具(ju)會幫(bang)我們更新頁面中(zhong)的(de)DOM元(yuan)素(su)。
Hello World示例
了解一門語言，或者學習一門新技術，編寫Hello World示例是我們的必經之路。
這段代碼在畫面上輸出"Hello World!"。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--這是我們的View--> <div id="app">
{{ message }} </div> </body> <script src="js/vue.js"></script> <script> // 這是我們的Model var exampleData = {
message: 'Hello World!'
} // 創建一個 Vue 實例或 "ViewModel" // 它連接 View 與 Model new Vue({
el: '#app',
data: exampleData
}) </script> </html>使用Vue的(de)(de)過程(cheng)就是定義MVVM各個組成部分的(de)(de)過程(cheng)的(de)(de)過程(cheng)。
定義View
定義Model
創建一個Vue實例或"ViewModel"，它用于連接View和Model
在創建Vue實例時，需要傳入一個選項對象，選項對象可以(yi)包含(han)數據、掛載(zai)元素、方法(fa)、模(mo)生命周期(qi)鉤子(zi)等等。
在這個示例中，選項對象的el屬性指向View，el: '#app'表示該Vue實例將掛載到<div id="app">...</div>這個元素；data屬性指向Model，data: exampleData表示我們的Model是exampleData對象。
Vue.js有多種(zhong)數(shu)據綁定的語(yu)法，*基礎(chu)的形式是文本插值，使用一(yi)對大(da)括號語(yu)法，在(zai)運(yun)行時(shi){{ message }}會(hui)被數(shu)據對象的message屬性(xing)替換(huan)，所(suo)以頁(ye)面上會(hui)輸出(chu)"Hello World!"。
Vue.js已經(jing)更新到2.0版(ban)本(ben)(ben)了，但(dan)由(you)于還不(bu)是(shi)正(zheng)式版(ban)，本(ben)(ben)文(wen)的(de)代碼(ma)都是(shi)1.0.25版(ban)本(ben)(ben)的(de)。
雙向綁定示例
MVVM模(mo)式本(ben)身是實現(xian)了雙(shuang)(shuang)向綁定的，在Vue.js中(zhong)可以使用v-model指令(ling)在表(biao)單元素上創建雙(shuang)(shuang)向數據綁定。
<!--這是我們的View--> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message"/> </div>將message綁(bang)定到文(wen)本(ben)框，當更改文(wen)本(ben)框的值時，<p>{{ message }}</p> 中的內(nei)容也(ye)會被更新。
反過來(lai)，如果改變(bian)message的值，文本框的值也會被(bei)更新(xin)，我們可(ke)以在Chrome控制臺進(jin)行嘗試。
Vue實例的(de)data屬(shu)(shu)性(xing)(xing)指(zhi)向(xiang)exampleData，它是(shi)一(yi)個(ge)引用類型，改變(bian)了exampleData對象(xiang)的(de)屬(shu)(shu)性(xing)(xing)，同(tong)時也(ye)會影響Vue實例的(de)data屬(shu)(shu)性(xing)(xing)。
Vue.js的常用指令
上面(mian)用(yong)到(dao)的(de)(de)v-model是Vue.js常用(yong)的(de)(de)一個指令(ling)(ling)，那么指令(ling)(ling)是什么呢？
Vue.js提供了一些常用的內(nei)置(zhi)指(zhi)(zhi)令，接(jie)下(xia)(xia)來我們(men)將(jiang)介紹(shao)以下(xia)(xia)幾個內(nei)置(zhi)指(zhi)(zhi)令：
v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令
Vue.js具有(you)良(liang)好的擴展性，我們也可以開(kai)發(fa)一些自定義的指令(ling)，后面的文章會(hui)介紹自定義指令(ling)。
v-if指令
v-if是(shi)條件渲染指令，它根據表達式的(de)真假來(lai)刪除和插(cha)入元素，它的(de)基本語法如(ru)下：
v-if="expression"
expression是一(yi)個(ge)返回(hui)bool值的(de)表達式，表達式可以是一(yi)個(ge)bool屬性，也可以是一(yi)個(ge)返回(hui)bool的(de)運算(suan)式。例如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1>Hello, Vue.js!</h1> <h1 v-if="yes">Yes!</h1> <h1 v-if="no">No!</h1> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
}) </script> </html>注意：yes, no, age, name這4個變量都來源于Vue實例選(xuan)項對(dui)象的data屬性。
這段代(dai)碼(ma)使用了4個表達式：
數據的yes屬(shu)性為true，所(suo)以"Yes!"會被輸出；
數據的(de)no屬性為(wei)false，所以(yi)"No!"不會被輸出；
運算式age >= 25返回(hui)true，所以"Age: 28"會被輸出；
運算(suan)式name.indexOf('jack') >= 0返回false，所(suo)以"Name: keepfool"不會被輸出。
注意：v-if指令是根據條件表達式的值來執行元素的插入或者刪除行為。
這一點可以(yi)從渲染的(de)HTML源(yuan)代碼(ma)看(kan)出來，面上只渲染了3個<h1>元素，v-if值為false的(de)<h1>元素沒有渲染到HTML。
為了再次(ci)驗證這一點，可(ke)以在Chrome控制臺更(geng)改(gai)age屬性，使得表達(da)式age >= 25的值為false，可(ke)以看到<h1>Age: 28</h1>元素(su)被刪除(chu)了。
age是定義在選項對象的data屬性中的，為什么Vue實例可以直接訪問它呢？
這是因為每個Vue實例都會代理其選項對象里的data屬性。
v-show指令
v-show也(ye)是(shi)條件渲(xuan)染指(zhi)令，和(he)v-if指(zhi)令不(bu)同的是(shi)，使用v-show指(zhi)令的元素(su)始終會被渲(xuan)染到HTML，它只是(shi)簡單(dan)地為元素(su)設置CSS的style屬性(xing)。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1>Hello, Vue.js!</h1> <h1 v-show="yes">Yes!</h1> <h1 v-show="no">No!</h1> <h1 v-show="age >= 25">Age: {{ age }}</h1> <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
}) </script> </html>在Chrome控(kong)制(zhi)臺更改age屬性，使得表達(da)式age >= 25的值(zhi)為false，可以看到<h1>Age: 24</h1>元素被設置了style="display:none"樣(yang)式。
v-else指令
可以(yi)用v-else指令為v-if或(huo)v-show添加一個“else塊”。v-else元素必須立即跟在v-if或(huo)v-show元素的后面(mian)——否則它不能(neng)被識別(bie)。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-else>Name: {{ name }}</h1> <h1>---------------------分割線---------------------</h1> <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1> <h1 v-else>Sex: {{ sex }}</h1> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({
el: '#app',
data: {
age: 28,
name: 'keepfool',
sex: 'Male'
}
}) </script> </html>v-else元素是否渲染在HTML中，取決于前面使用的是v-if還是v-show指令。
這(zhe)段代碼中v-if為true，后(hou)面(mian)的(de)v-else不會渲染(ran)到HTML；v-show為tue，但是后(hou)面(mian)的(de)v-else仍然渲染(ran)到HTML了。
v-for指令
v-for指令基于(yu)一(yi)個(ge)數組渲染(ran)一(yi)個(ge)列(lie)表，它和JavaScript的(de)遍歷語法相似：
v-for="item in items"
items是(shi)一個數組，item是(shi)當前(qian)被遍歷的(de)數組元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles/demo.css" /> </head> <body> <div id="app"> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> </tr> </tbody> </table> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({
el: '#app',
data: {
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
}) </script> </html>我們在選項對象的(de)data屬性中定(ding)義(yi)了一個(ge)(ge)people數組，然(ran)后(hou)在#app元(yuan)素(su)內使用(yong)v-for遍(bian)歷people數組，輸出每(mei)個(ge)(ge)person對象的(de)姓(xing)名、年齡和性別(bie)。
v-bind指令
v-bind指令可以在其名稱后面帶一個(ge)參(can)(can)數，中間放一個(ge)冒號隔開(kai)，這個(ge)參(can)(can)數通常是HTML元素的特性（attribute），例(li)如：v-bind:class
v-bind:argument="expression"
下面這段代碼構建了一個簡單的分頁條，v-bind指令作用于元素的class特性上。
這個(ge)指令包(bao)含一(yi)個(ge)表(biao)達(da)式，表(biao)達(da)式的含義是：高亮當前頁。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles/demo.css" /> </head> <body> <div id="app"> <ul class="pagination"> <li v-for="n in pageCount"> <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a> </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({
el: '#app',
data: {
activeNumber: 1,
pageCount: 10
}
}) </script> </html>注(zhu)意(yi)v-for="n in pageCount"這行(xing)代碼，pageCount是一個整(zheng)數，遍歷(li)時n從0開始，然后遍歷(li)到pageCount –1結(jie)束(shu)。