Vue2.0之內(nèi)部指令的示例分析
這篇文章主要介紹了Vue 2.0之內(nèi)部指令的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
為金華等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及金華網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、金華網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
1.Vue.js介紹
當(dāng)前前端三大主流框架：Angular、React、Vue。React前段時(shí)間由于許可證風(fēng)波，使得Vue的熱度蹭蹭地上升。另外，Vue友好的API文檔更是一大特色。Vue.js是一個(gè)非常輕量級(jí)的工具，與其說是一個(gè)MVVM框架，不如說是一個(gè)js庫。Vue.js具有響應(yīng)式編程和組件化的特點(diǎn)。響應(yīng)式編程，即保持狀態(tài)和視圖的同步，狀態(tài)也可以說是數(shù)據(jù)吧；而其組件化的理念與React則一樣，即“一切都是組件，組件化思想方便于模塊化的開發(fā)，是前端領(lǐng)域的一大趨勢(shì)。
2.內(nèi)部指令
2-1.v-if v-else v-show：前兩者一般配合使用，v-show的效果類似于v-if。
實(shí)例如下：
if
else
show
DOM結(jié)構(gòu)中，三個(gè)p標(biāo)簽中的內(nèi)容是否顯示在頁面中取決于flag的布爾值屬性。當(dāng)flag為true時(shí)，if和show都會(huì)顯示，else也不會(huì)存在于DOM結(jié)構(gòu)中。v-if和v-show的不同體現(xiàn)在：v-if是根據(jù)條件的值判斷是否加載，可以減輕服務(wù)器的壓力，但是缺點(diǎn)是當(dāng)改變條件的值，頁面又要加載一次；v-show則無論條件的值是否為true，都會(huì)加載（若條件為true，則display屬性設(shè)置為其默認(rèn)屬性，反之，設(shè)置為none）
2-2.v-for 循環(huán)指令
實(shí)例如下：
{}
頁面會(huì)顯示5個(gè)li，插值的效果是li會(huì)顯示與數(shù)組b一 一對(duì)應(yīng)的元素，v-for有點(diǎn)類似于for in循環(huán)
2-3 v-text v-html 文本（html字符串）指令
可以聯(lián)想到j(luò)query的text()、html()。到現(xiàn)在，你會(huì)發(fā)現(xiàn)前面都是利用插值操作，即{{}}，這種做法會(huì)在一定程度上影響性能。
同理，類比jquery的on()方法，綁定事件用的，實(shí)例中v-on:click可以簡寫為@click。click可以替換成鼠標(biāo)的其他操作，如mouseout、mouseover等等。
效果為a標(biāo)簽顯示紅色，且其src屬性為vm.message。v-bind指令主要用于設(shè)置html標(biāo)簽的屬性，其簡寫形式為 v-bind：——>：
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue 2.0之內(nèi)部指令的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
重慶分公司
重慶分公司
