一、前言

進(jìn)入Vue.js的新世界，打怪升級(jí)，熟悉Vue.js的武器系統(tǒng)。菜鳥(niǎo)誕生的第二課，在新手村中熟悉Vue指令~~~

二、打怪升級(jí)

1、 v-cloak

在使用Vue的過(guò)程中，當(dāng)我們引入了 vue.js 這個(gè)文件之后，瀏覽器的內(nèi)存中就存在了一個(gè) vue 對(duì)象，此時(shí)，我們就可以通過(guò)構(gòu)造函數(shù)的方式創(chuàng)建出一個(gè) vue 的對(duì)象實(shí)例，后面就可以對(duì)這個(gè)實(shí)例進(jìn)行操作。

如果在這個(gè)過(guò)程中，對(duì)于 vue.js 的引用因?yàn)槟承┰驔](méi)有加載完成，此時(shí)，未編譯的 Mustache 標(biāo)簽就無(wú)法正常顯示。例如，在下面的例子中，我們模擬將網(wǎng)頁(yè)加載速度變慢，此時(shí)就可以看見(jiàn)，頁(yè)面最先開(kāi)始會(huì)顯示出插值表達(dá)式，只有 vue.js 加載完成后，才會(huì)渲染成正確的數(shù)據(jù)。

1?

2?????

{{msg}}

?3? ?4??5??6??7??8?????new?Vue({?9?????????el:?'#app',10?????????data:?{11?????????????msg:?'hello?world'12?????????}13?????});14?

這時(shí)候，我們就可以使用v-cloak指令用于隱藏未編譯完成的插值表達(dá)式，一般我們?cè)谑褂脮r(shí)會(huì)與添加一個(gè)隱藏該元素的樣式同時(shí)使用。

[v-cloak]?{

display:?none;

}

{{msg}}

大家可以看到，當(dāng)頁(yè)面沒(méi)有顯示內(nèi)容時(shí)，此時(shí) p 標(biāo)簽添加了一個(gè) v-cloak 屬性，同時(shí)，從右側(cè)的樣式中可以看到，隱藏顯示，當(dāng)加載完成后， p 標(biāo)簽上去除了該屬性，同時(shí)插值表達(dá)式也編譯完成，正確顯示出來(lái)。

2、 v-text 與 v-html

v-text 與 v-html 指令都可以更新頁(yè)面元素的內(nèi)容，不同的是，v-text 會(huì)將數(shù)據(jù)以字符串文本的形式更新，而 v-html 則是將數(shù)據(jù)以 html 標(biāo)簽的形式更新。

在更新數(shù)據(jù)上，我們也可以使用差值表達(dá)式進(jìn)行更新數(shù)據(jù)，不同于 v-text、v-html 指令，差值表達(dá)式只會(huì)更新原本占位插值所在的數(shù)據(jù)內(nèi)容，而 v-text、v-html 指令則會(huì)替換掉整個(gè)的內(nèi)容。

1?

2??3?????

+++++++++?{{msg}}?-----------

?4?????

=================

?5?????

==============

?6??????7?????

============

?8??9? 10?11?12?????new?Vue({13?????????el:?'#app',14?????????data:?{15?????????????msg:?'hello?world',16?????????????msgHtml:?'

I?want?to?learn?vue.js

'17?????????}18?????});19?

3、 v-bind

v-bind 可以用來(lái)在標(biāo)簽上綁定標(biāo)簽的屬性(例如：img 的 src、title 屬性等等)和樣式(可以用 style 的形式進(jìn)行內(nèi)聯(lián)樣式的綁定，也可以通過(guò)指定 class 的形式指定樣式)。同時(shí)，對(duì)于綁定的內(nèi)容，是做為一個(gè) js 變量，因此，我們可以對(duì)該內(nèi)容進(jìn)行編寫(xiě)合法的 js 表達(dá)式。

在下面的示例中，我們將這個(gè)按鈕的 title 和 style 都是通過(guò) v-bind 指令進(jìn)行的綁定，這里對(duì)于樣式的綁定，我們需要構(gòu)建一個(gè)對(duì)象，其它的對(duì)于樣式的綁定方法，我們將在后面的學(xué)習(xí)中提到。

1?

2??????6??????7??8??????9?????10? 11?12?13?new?Vue({14?????el:?'#app',15?????data:?{16?????????msgTitle:?'這是我自定義的title屬性',17?????????colorStyle:?'red',18?????????widthStyle:?'120'19?????}20?});21?

效果示意圖如下所示

4、 v-on

在傳統(tǒng)的前端開(kāi)發(fā)中，當(dāng)我們想對(duì)一個(gè)按鈕綁定事件時(shí)，我們需要獲取到這個(gè)按鈕的 dom 元素，再對(duì)這個(gè)獲取到的 dom 進(jìn)行事件的綁定。在我們學(xué)習(xí) vue 的過(guò)程中，我們可以秉持一個(gè)思想，對(duì)于 dom 的操作，全部讓 vue 替我們完成，我們只關(guān)注業(yè)務(wù)代碼實(shí)現(xiàn)，因此，我們可以使用 vue 內(nèi)置的 v-on 指令來(lái)替我們完成事件的綁定。

傳統(tǒng)的元素 js 寫(xiě)法如下所示

//?傳統(tǒng)的事件綁定方法????document.getElementById('btn').?=?function?()?{

alert('傳統(tǒng)的事件綁定方法');

}

在使用 v-on 指令對(duì)事件進(jìn)行綁定時(shí)，我們需要在標(biāo)簽上指明 v-on:event(click、mousedown、mouseup 等等) 綁定的事件。

這樣就可以了嗎？我們可以測(cè)試下，哦吼，報(bào)錯(cuò)了，vue 提醒我們屬性或者方法在 vue 實(shí)例中未定義，原來(lái)在 vue 的設(shè)計(jì)中許多事件處理邏輯會(huì)更為復(fù)雜，所以直接把 JavaScript 代碼寫(xiě)在 v-on 指令中是不可行的。因此 v-on 還可以接收一個(gè)需要調(diào)用的方法名稱(chēng)。所以，我們需要在 vue 實(shí)例的 methods 下寫(xiě)出方法。

當(dāng)然，使用 v-on 指令接收的方法名稱(chēng)也可以傳遞參數(shù)，我們只需要在 methods 中定義方法時(shí)說(shuō)明這個(gè)形參即可在方法中獲取到。

1??2??3??4??5??6?var?vm?=?new?Vue({?7?????el:?'#app',?8?????data:?{?9?????????msgTitle:?'這是我自定義的title屬性',10?????????colorStyle:?'red',11?????????widthStyle:?'120'12?????},13?????methods:?{//在?methods?中定義當(dāng)前?vue?實(shí)例的所有可訪(fǎng)問(wèn)方法14?????????handlerClick()?{15?????????????alert('我是使用?v-on?指令綁定的事件');16?????????},17??????????handlerClickWithParam(id)?{18?????????????alert('我是使用?v-on?指令綁定的事件，方法參數(shù)為'+id);19?????????}20?????}21?});

5、 v-model

在之前的學(xué)習(xí)中，對(duì)于數(shù)據(jù)的綁定，不管是使用插值表達(dá)式還是 v-text 指令，對(duì)于數(shù)據(jù)間的交互都是單向的，即只能將 vue 實(shí)例里的值傳遞給頁(yè)面，頁(yè)面對(duì)數(shù)據(jù)值的任何操作卻無(wú)法傳遞給 model。

例如，在下面的示例頁(yè)面中，我們手動(dòng)將頁(yè)面的 h3 標(biāo)簽里的內(nèi)容進(jìn)行修改，通過(guò)控制臺(tái)獲取到 vue 實(shí)例中的數(shù)據(jù)，發(fā)現(xiàn)數(shù)據(jù)并沒(méi)有發(fā)生變化。這里可以使用 window.vm 獲取到 vue 實(shí)例，則是因?yàn)槲覀冎耙?vue.js 后，會(huì)自動(dòng)在瀏覽器內(nèi)存中創(chuàng)建 vue 對(duì)象，我們通過(guò)構(gòu)造函數(shù)創(chuàng)建的 vue 的實(shí)例也就存在與瀏覽器的內(nèi)存里了。

{{?msg?}}

var?vm?=?new?Vue({

el:?'#app',

data:?{

msg:?'你好啊，hahaha'

}

});

MVVM中最重要的一個(gè)特性，可以說(shuō)就是數(shù)據(jù)的雙向綁定，而 vue 作為一個(gè) MVVM 框架，理所應(yīng)當(dāng)?shù)膶?shí)現(xiàn)了數(shù)據(jù)的雙向綁定，所以我們可以使用內(nèi)置的 v-model 指令完成數(shù)據(jù)的在 View 與 Model 間的雙向綁定。

我們知道，只有表單元素可以與用戶(hù)進(jìn)行交互，所以我們只能使用 v-model 指令在表單控件或者組件上創(chuàng)建雙向綁定。對(duì)于組件的雙向綁定，我們也會(huì)在后面的學(xué)習(xí)中提到。

{{?msg?}}

var?vm?=?new?Vue({

el:?'#app',

data:?{

msg:?'你好啊，程十六'

}

});

6、 v-if?與?v-show

v-if 與 v-show 指令都是根據(jù)表達(dá)式的真假值判斷元素的顯示與否。

在下面的代碼中，我們通過(guò)綁定一個(gè)按鈕的點(diǎn)擊事件，去修改 flag 值，從而做到對(duì)于兩個(gè) h3 標(biāo)簽的顯示與否的控制。

1?

2??????3??4?????

我是通過(guò)?v-if?指令控制的~~~

?5?????

我是通過(guò)?v-show?指令控制的~~~

?6? ?7??8??9?????var?vm?=?new?Vue({10?????????el:?'#app',11?????????data:?{12?????????????flag:?true13?????????},14?????????methods:?{15?????????????handlerClick()?{16?????????????????this.flag?=?!this.flag;17?????????????}18?????????}19?????});20?

我們可以看到，flag 的初始值為 true，此時(shí)，兩個(gè) h3 標(biāo)簽都可以顯示出來(lái)，當(dāng)我們點(diǎn)擊切換按鈕后，兩個(gè) h3 都隱藏了，不同的是，我們可以看到，對(duì)于使用 v-if 指令控制的 h3 標(biāo)簽，當(dāng)表達(dá)式為 false 時(shí)，這個(gè)元素 dom 會(huì)直接銷(xiāo)毀并重建，而對(duì)于使用 v-show 指令控制的 h3 標(biāo)簽，當(dāng)表達(dá)式為 false 時(shí)，僅僅是將當(dāng)前元素的 display CSS 屬性值設(shè)置為 none。所以，當(dāng)我們需要頻繁控制元素的顯示與否時(shí)，推薦使用 v-show 指令，避免因?yàn)槭褂?v-if 指令而造成的高性能消耗。

7、 v-for

不管我們是寫(xiě) C# 還是寫(xiě) JAVA 或者是前端的 JavaScript 腳本，提到循環(huán)數(shù)據(jù)，首先都會(huì)想到 使用 for 循環(huán)，同樣的，在 vue 中，作者也為我們提供了 v-for 這一指令 用來(lái)循環(huán)數(shù)據(jù)。

在使用 v-for 指令時(shí)，我們可以對(duì)數(shù)組、對(duì)象、數(shù)字、字符串進(jìn)行循環(huán)，獲取到源數(shù)據(jù)的每一個(gè)值。使用 v-for 指令，必須使用特定語(yǔ)法 alias in expression ，為當(dāng)前遍歷的元素提供別名，這里類(lèi)似于 C# 中的 foreach 的循環(huán)格式。

1?

2??????3?????

數(shù)組索引值:?{{?index?}}?,?數(shù)據(jù)值:?{{?item?}}

?4? ?5??6??7?????var?vm?=?new?Vue({?8?????????el:?'#app',?9?????????data:?{10?????????????arrayList:?[12,?20,?34,?1,?6]11?????????}12?????});13?

在 v-for 指令中，我們擁有對(duì)父作用域?qū)傩缘耐耆L(fǎng)問(wèn)權(quán)限。v-for 還支持一個(gè)可選的第二個(gè)參數(shù)為當(dāng)前項(xiàng)的索引。在上面這個(gè)循環(huán)數(shù)組的代碼中，item 代表了數(shù)組中的每一項(xiàng)數(shù)據(jù)，index 則表示為當(dāng)前項(xiàng)的索引，所以我們可以很方便的打印出數(shù)組中每一項(xiàng)數(shù)據(jù)和索引。同時(shí)，我們?cè)?ul 標(biāo)簽上綁定了一個(gè) key 屬性，它可以為循環(huán)出來(lái)的每一項(xiàng)提供一個(gè) key 值，我們可以理解成數(shù)據(jù)庫(kù)表中的每一條數(shù)據(jù)都有一個(gè)唯一的主鍵值，同樣的，我們需要保證這個(gè) key 值要唯一對(duì)應(yīng)著當(dāng)前的數(shù)據(jù)項(xiàng)。

這里，采用循環(huán)數(shù)組對(duì)象的方式，來(lái)解釋這個(gè) key 屬性要唯一的問(wèn)題。

1?

2???????3??????4?????

數(shù)組索引值:?{{?index?}}?,?id:?{{?item.id?}}?,?name:?{{?item.name?}}?,?age:?{{?item.age?}}

?5? ?6??7??8?????var?vm?=?new?Vue({?9?????????el:?'#app',10?????????data:?{11?????????????objList:?[12?????????????????????{id:?1,name:?'zhangsan',age:?23},13?????????????????????{id:?2,name:?'lisi',age:?32},14?????????????????????{id:?3,name:?'wangwu',age:?22},15?????????????????]16?????????}17?????});18?

我們現(xiàn)在循環(huán)了一個(gè)對(duì)象數(shù)組，并在每一個(gè)數(shù)據(jù)項(xiàng)多的前面加了一個(gè)單選框，現(xiàn)在我們選中 {id: 2,name: 'lisi',age: 32} 這個(gè)數(shù)據(jù)對(duì)象，同時(shí)，使用控制臺(tái)往數(shù)組中添加新的元素。我們知道往一個(gè)數(shù)組中新增元素可以使用 push 方法或者是 unshift 方法，我們來(lái)嘗試一下。

我們看到當(dāng)我們使用 push 方法在數(shù)組的最后添加一個(gè)數(shù)據(jù)時(shí)，之前單選框選擇的數(shù)據(jù)沒(méi)有發(fā)生更改，而當(dāng)我們使用 unshift 方法在數(shù)組最前面添加一個(gè)數(shù)據(jù)時(shí)，單選框選擇的數(shù)據(jù)就發(fā)生了更改。這里就是因?yàn)?key 屬性綁定的是數(shù)組索引的緣故，我們選中的索引值是1，當(dāng)在選中的數(shù)組元素前面添加數(shù)據(jù)時(shí)，原來(lái)選中的數(shù)組數(shù)據(jù)的索引值就會(huì)加一，所以最后就會(huì)選擇到別的元素。

這里我們就可以將 key 綁定為 item.id 這個(gè)屬性，這樣我們添加數(shù)據(jù)時(shí)就不會(huì)對(duì)選中的數(shù)據(jù)造成影響了，因?yàn)?#xff0c;我們已經(jīng)告訴了程序，我們是根據(jù) item.id 這個(gè) key 值進(jìn)行選中的，與數(shù)組的索引值無(wú)關(guān)。注意，這里如果我們添加的對(duì)象數(shù)據(jù)?id?還是3的話(huà)雖然可以添加成功，但是 vue 會(huì)給我們提示警告信息了，因?yàn)橐呀?jīng)存在了一個(gè)?id?等于3的數(shù)據(jù)。

數(shù)組索引值:?{{?index?}}?,?id:?{{?item.id?}}?,?name:?{{?item.name?}}?,?age:?{{?item.age?}}

對(duì)于對(duì)象、數(shù)字、字符串的循環(huán)與對(duì)于數(shù)組的循環(huán)差不多，實(shí)現(xiàn)方法如下所示，大家可以自己編寫(xiě)下試試。不過(guò)在遍歷對(duì)象時(shí)，是按 Object.keys() 的結(jié)果遍歷，但是不能保證它的結(jié)果在不同的 JavaScript 引擎下是一致的。

鍵名:?{{?key?}}?,?值:?{{?value?}}?,?索引值:?{{?index?}}

{{?item?}}

{{?item?}}

var?vm?=?new?Vue({

el:?'#app',

data:?{

obj:?{

id:?1,

name:?'chengshiliu',

age:?17

}

}

});

三、總結(jié)

這一章我們主要學(xué)習(xí)了一些 vue 中的內(nèi)置指令，熟悉了它們的使用方法，本篇文章的全部的源碼都在文章開(kāi)始處提供倉(cāng)儲(chǔ)地址里，每一個(gè)文件的說(shuō)明，可以查看 github 倉(cāng)儲(chǔ)的 readme 說(shuō)明，希望多多關(guān)注啊，嘻嘻。

總結(jié)

以上是生活随笔為你收集整理的20层的试炼html5,Vue.js-02：新手村的试炼 - 新世界的武器（指令）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。