Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。他自身不是一個(gè)全能框架——只聚焦于視圖層。因此它非常容易學(xué)習(xí),非常容易與其它庫(kù)或已有項(xiàng)目整合。在與相關(guān)工具和支持庫(kù)一起使用時(shí),Vue.js 也能完美地驅(qū)動(dòng)復(fù)雜的單頁(yè)應(yīng)用。他的語(yǔ)法和 AngularJS特別相像,如果接觸過(guò)AngularJS的,上手會(huì)更快。而且vue比AngularJS使用簡(jiǎn)潔、靈活了很多。
那今天,我就給大家詳細(xì)的說(shuō)道說(shuō)道這個(gè) Vue.js ,以下是我們這次詳解的目錄,朋友們可以根據(jù)自己的情況選擇性閱讀,所有操作均附有代碼實(shí)現(xiàn)。
1. Vue.js 如何綁定到頁(yè)面中,使用他的功能。
2. Vue 實(shí)例化對(duì)象的生命周期。
3. Vue 的 所有 數(shù)據(jù)綁定指令
那接下來(lái),我們就開(kāi)始今天的介紹啦!
1. Vue.js 如何綁定到頁(yè)面中,使用他的功能。
先看下面的一段代碼:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="app1" onclick="app1.func()">我是app1,點(diǎn)我</button> </body> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //通過(guò)Vue.js的構(gòu)造函數(shù) 實(shí)例化出一個(gè)根實(shí)例 var app1= new Vue({ el:"#app1", data:{ message:"我在app1中顯示出來(lái)了嗎?", func:function(){ alert(this.message); } } }); console.log(app1.$data.message); //這個(gè)要知道哈,app1就是一個(gè)變量,一個(gè)對(duì)象類型的變量,鏈?zhǔn)秸Z(yǔ)法直接用即可 </script></html>
效果如下:
上述代碼就是點(diǎn)擊按鈕有彈窗,下面解析一下這段代碼。
var app1= new Vue({
el:"#app1",
data:{
message:"我在app1中顯示出來(lái)了嗎?",
func:function(){
alert(this.message);
}
}
});
console.log(app1.$data.message);
通過(guò)Vue.js的構(gòu)造函數(shù)實(shí)例化出一個(gè)根實(shí)例 app1 ,說(shuō)白了,這就是我們面向?qū)ο蟮膶?duì)象的實(shí)例化,直接 new 一個(gè)對(duì)象。
el:"#app1", 這是在 掛載我們實(shí)例化對(duì)象的元素節(jié)點(diǎn),就是這個(gè)app1 對(duì)象作用域是那一個(gè)標(biāo)簽里面的。這里可以是 id、class、tagname。但是主要還是用id,因?yàn)樗奈ㄒ恍浴?/p>
data:{} 是定義 這個(gè)對(duì)象的變量和方法,注意所有在和 app1 有關(guān)聯(lián)的變量、方法都必須在data中聲明。
注意: (1)作用域。js5 只有函數(shù)作用域,所以 data 中的函數(shù)如果想調(diào)用變量,就必須通過(guò) this. 調(diào)用,或者直接通過(guò)對(duì)象名調(diào)用。
(2)外部調(diào)用。app1.$data.message; 在js中直接調(diào)用 vue 對(duì)象的屬性、方法時(shí),需要鏈?zhǔn)秸Z(yǔ)法,一層層點(diǎn)出來(lái),這里用 $data ,主要還是和js的變量作區(qū)別
(3)與HTML代碼的綁定。 這里我是通過(guò) js 的onclick直接綁定的,當(dāng)然 vue 有自己的事件綁定,這里暫且不講,如果用 js 的行內(nèi)綁定,注意需要帶對(duì)象名。這就是純 OOP思想了。相信大家對(duì)面向?qū)ο笠膊荒吧?,如果真的不知道是啥玩意的,趕緊百度學(xué)去。
以上就是最最最最最最.....基礎(chǔ)的使用 vue 的方法了。
2. Vue 實(shí)例化對(duì)象的生命周期。
接下來(lái),我們說(shuō)一下,一個(gè)實(shí)例化出來(lái)的對(duì)象,他的生命周期是啥樣的,要經(jīng)歷那些階段。請(qǐng)看下面一段代碼:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="container">我的聲明周期,大家看吧!</div> </body> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //以下代碼時(shí)顯示vm整個(gè)生命周期的流程 var vm = new Vue({ el: "#container", data: { test : 'hello world' }, beforeCreate: function(){ console.log(this); showData('創(chuàng)建vue實(shí)例前',this); }, created: function(){ showData('創(chuàng)建vue實(shí)例后',this); }, beforeMount:function(){ showData('掛載到dom前',this); }, mounted: function(){ showData('掛載到dom后',this); }, beforeUpdate:function(){ showData('數(shù)據(jù)變化更新前',this); }, updated:function(){ showData('數(shù)據(jù)變化更新后',this); }, beforeDestroy:function(){ vm.test ="3333"; showData('vue實(shí)例銷毀前',this); }, destroyed:function(){ showData('vue實(shí)例銷毀后',this); } }); function realDom(){ console.log('真實(shí)dom結(jié)構(gòu):' + document.getElementById('container').innerHTML); } function showData(process,obj){ console.log(process); console.log('data 數(shù)據(jù):' + obj.test) console.log('掛載的對(duì)象:') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } </script></html>
那接下來(lái)看看效果圖:
通過(guò)控制臺(tái)的打印效果可以看出來(lái),實(shí)例化 vue 對(duì)象大致分為 創(chuàng)建vue實(shí)例、掛載到dom、數(shù)據(jù)變化更新、vue實(shí)例銷毀 4個(gè)階段,,注意每個(gè)階段都有對(duì)應(yīng)的鉤子,我們可以通過(guò)對(duì)這些鉤子進(jìn)行操作,達(dá)成一些功能。雖然初學(xué)者用不太上,但是提前了解一下還是好的,到時(shí)候碰到實(shí)際功能要能想得到生命周期的鉤子。
3. Vue 的 所有 數(shù)據(jù)綁定指令
那現(xiàn)在我們就總結(jié)一下 vue 的最大亮點(diǎn),各種靈活的數(shù)據(jù)綁定方法。這里主要列舉實(shí)例詳解 {{}} 、 v-once 、 v-html 、 v-bind 和 v-model 。
(1)首先是 {{}} 、 v-once 、 v-html 的用法,請(qǐng)看下面的代碼:
數(shù)據(jù)綁定篇 點(diǎn)我,改變變量message的值 {{message}} {{message}}
然后看一下效果:
還是分析一下這個(gè)小demo。
<div>{{message}}</div> Mustache 標(biāo)簽,也就是雙大括號(hào),他和 AnjularJs 的雙大括號(hào)完全相同,就是直接將數(shù)據(jù)動(dòng)態(tài)綁定到標(biāo)簽中,當(dāng)變量發(fā)生變化的時(shí)候,標(biāo)簽內(nèi)容也是改變,上大括號(hào)里面也是可以寫表達(dá)式的。上述代碼是做了一個(gè) 在button中點(diǎn)擊改變變量message的值,然后通過(guò)數(shù)據(jù)綁定使div的text即時(shí)變化。
<div v-once>{{message}}</div> 他也是數(shù)據(jù)綁定,但是只綁定一次。要注意 v-once是加載div上的,所以整個(gè)div的所有綁定數(shù)據(jù),都只會(huì)加載一次,再更新就不會(huì)變了,所以點(diǎn)擊 button時(shí),第二個(gè)div的數(shù)據(jù)并沒(méi)有發(fā)生改變。
<div v-html="h1"></div> 是綁定HTML標(biāo)簽,注意 他可以直接綁定 HTML模板,但是這一堆HTML標(biāo)簽不能是多層嵌套的。什么意思呢,就是你之間綁定一段標(biāo)簽可以,綁定一個(gè)模板也可以,但是如果綁定一個(gè)模板,那這個(gè)模板內(nèi)部不能再嵌套模板了。否則無(wú)法渲染的。上述代碼就是直接導(dǎo)入了一個(gè)加了行內(nèi)樣式的h1標(biāo)簽,功能十分強(qiáng)大,比直接操作dom節(jié)點(diǎn)強(qiáng)太多了,效率是幾何倍的增長(zhǎng)。
(2) 其次是 v-bind
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>數(shù)據(jù)綁定篇</title> <style type="text/css"> .aaa{ margin: 10px; width: 100px; height: 100px; background-color: red; } .bbb{ margin: 10px; width: 50px; height: 50px; background-color: blue; } </style> </head> <body> <!-- 數(shù)據(jù)綁定篇 --> <div id="app1"><!--2. v-bind--> <!--v-bind 他是專門用來(lái)綁定屬性的 ,主要用來(lái)操作元素的 class 列表和它的內(nèi)聯(lián)樣式--> <!--這個(gè)和用 js 直接操作dom節(jié)點(diǎn)功能一樣,不過(guò)簡(jiǎn)單特別多--> <div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div> <!--還可以直接綁定更改 class--> <div v-bind:class="myClass" onclick="app1.func2()"></div> ------------------------------------------------------------------------------------- <div class="img" style="width: 100px;height: 100px;"> <img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/> </div> </div> </body> <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript"> //通過(guò)Vue.js的構(gòu)造函數(shù) 實(shí)例化出一個(gè)根實(shí)例 var app1= new Vue({ el:"#app1", data:{ myColor:"blue", myWidth:100, myHeight:100, myClass:"aaa", mySrc:"img/2.png", func1:function(){ if (this.myColor == "blue") { this.myColor = "red"; this.myWidth = 50, this.myHeight = 50 }else{ this.myColor = "blue"; this.myWidth = 100, this.myHeight = 100 } }, func2:function(){ if (this.myClass == "aaa") { this.myClass = "bbb"; }else{ this.myClass = "aaa"; } }, func3:function(){ if (this.mySrc == "img/2.png") { this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg"; }else{ this.mySrc = "img/2.png"; } } } }); </script></html>
然后看一下效果:
那我們解析一下上面的代碼。
v-bind 他是專門用來(lái)綁定屬性的 ,主要用來(lái)操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這一點(diǎn)和AnjularJs的 ng-bind 是完全不同的,要注意?。?!
<div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}"onclick="app1.func1()"></div> 這是在直接綁定行內(nèi)樣式style。然后通過(guò)綁定點(diǎn)擊函數(shù),為各個(gè)比那兩賦值,達(dá)到點(diǎn)擊更改div樣式的目的。
<div v-bind:class="myClass" onclick="app1.func2()"></div> 這個(gè)是直接綁定修改 class類名,在頁(yè)內(nèi)樣式表中有我定義的 .aaa 和 .bbb 兩個(gè)類名,通過(guò)動(dòng)態(tài)修改class名修改樣式,這也比 JQuery 直接操作dom節(jié)點(diǎn)快捷不少。
<img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/> 這是直接綁定屬性,動(dòng)態(tài)修改 img 的src 屬性。達(dá)到點(diǎn)擊圖像顯示不同的圖像的效果。
這里要特別強(qiáng)調(diào)一下,v-bind 直接綁定的是屬性,而不是樣式 ,對(duì)于 img ,他的src是屬性,但是對(duì)于 div ,width 啥的是樣式,不是屬性,所以 v-bind:width="100+'px'" 不好使.
至于 v-bind 屬性綁定,也就常用用法也就這么多了。
(3) v-model
用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù),并特別處理一些極端的例子。v-model 并不關(guān)心表單控件初始化所生成的值。因?yàn)樗鼤?huì)選擇 Vue 實(shí)例數(shù)據(jù)來(lái)作為具體的值。在默認(rèn)情況下, v-model 在 input 事件中同步輸入框的值與數(shù)據(jù),但你可以添加一個(gè)修飾符 lazy ,從而轉(zhuǎn)變?yōu)樵?change 事件中同步