大學(xué)課件-VUEjs實(shí)用教程_第1頁
大學(xué)課件-VUEjs實(shí)用教程_第2頁
大學(xué)課件-VUEjs實(shí)用教程_第3頁
大學(xué)課件-VUEjs實(shí)用教程_第4頁
大學(xué)課件-VUEjs實(shí)用教程_第5頁
已閱讀5頁，還剩359頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

（一）什么是vue.js?①視頻介紹②核心概念Vue（讀音/vju:/,類似于view）是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，具有簡(jiǎn)單小巧的核心，簡(jiǎn)單小巧的核心，漸進(jìn)式技術(shù)棧，足以應(yīng)付任何應(yīng)用。解釋：.簡(jiǎn)單小巧是指：vue.js壓縮后僅有17kb的大小。.漸進(jìn)式是指：你可以一步一步有階段的使用vue.js,而不需要一開始就使用所有的東西。③官方網(wǎng)站①**的設(shè)計(jì)模式謎**在設(shè)計(jì)上采用mvvm模式進(jìn)行設(shè)計(jì)，mvvm模式剛出來時(shí)一度的被人奉為神一般的模式，好像不懂mvvm模式就脫離了時(shí)代一樣。②什么是mvvm模式呢？Mvvm的全稱為：ModekView、ViewModeLm表示數(shù)據(jù)模型層，v表示視圖層，vm表示視圖模型控制層View■/ ViewModelModel③以一個(gè)網(wǎng)頁為例說明mvvm

如果我們有一個(gè)數(shù)組要渲染到網(wǎng)頁中去，那么在其中：數(shù)據(jù)層M即為數(shù)組，視圖層v就是用看到的渲染后的網(wǎng)頁，視圖模型層vm就是我們的js控制層，控制網(wǎng)頁v和數(shù)據(jù)m同步（即數(shù)組數(shù)據(jù)改變了就重新渲染網(wǎng)頁，網(wǎng)頁變了就修改數(shù)組數(shù)據(jù)）④注意如果我們要使用mvvm模式的框架，那么我們只需要關(guān)注m層與v層。vm層是框架內(nèi)置寫好了的，控制視圖層和模型數(shù)據(jù)層的同步代碼不需要我們來寫。就如同vue這樣的框架，他已經(jīng)幫我們把數(shù)據(jù)和視圖雙向綁定了（mv）,我們改變了數(shù)據(jù)，網(wǎng)頁會(huì)自動(dòng)的改變，而不需要我們操作DOM節(jié)點(diǎn)。①**特點(diǎn)解耦數(shù)據(jù)與視圖（mvvm,只關(guān)心數(shù)據(jù)即可，vue會(huì)讓視圖自動(dòng)同步）②可復(fù)用組件（類似于js函數(shù)，但更強(qiáng)大，把網(wǎng)頁ui也封裝了，且可復(fù)用）

③前端路由（類似于nodejs路由，用戶發(fā)起不同操作，渲染不同ui組件,提高性能）④狀態(tài)管理（應(yīng)用的每一刻都是一個(gè)狀態(tài)，這些狀態(tài)能夠在vue中有效的管理起來）⑤虛擬D0M（虛擬DOM有效降低大面積真實(shí)DOM節(jié)點(diǎn)的重繪與排版，只渲染局部，性能高）（二）vue地位，（二）vue地位，1:新版本,兼容性⑴vue地位①Vue為全球使用量最多的最流行的兩大前端框架之一。另一個(gè)為reacto在世界范圍內(nèi)，react應(yīng)該略多于vue。在中國(guó)范圍內(nèi)，兩者相差不大，甚至vue的流行程度還要略多于react框架。**的最新版本?

最新版本：V2.5.17Github托管地址:https:〃/vueis/vue/releases技術(shù)棧：https:〃/vueis**的兼容性？Vue不支持IE8及以下版本因?yàn)閂ue使用了IE8無法模擬的ECMAScript5特性。但它支持所有兼容ECMAScript5的瀏覽器。（三）vue本身要學(xué)的東西.基本使用（概覽）.指令（控制視圖層，V層）.Vue實(shí)例對(duì)象內(nèi)容（M層）.Vue組件（復(fù)用開發(fā)）.Vue+webpack開發(fā).必須模塊（vue-router,vuex）（四）安裝vue.js?①使用方式.通過script標(biāo)簽引入使用【適合小型的簡(jiǎn)單應(yīng)用】.以【npm+webpack+單頁】形式引入使用【適合大型的

復(fù)雜應(yīng)用】.通過vue-cli安裝官方腳手架（等價(jià)于第二種）②備注這里先講解使用我們習(xí)慣的script方式使用vue.js,等后面講到webapck使用方式時(shí)再來講解第二種。③通過script標(biāo)簽使用vue.js以下幾種隨意選擇一種即可，最終使用的文件都是一樣的.直接引入cdn<scriptsrc="****/dist/vue.js"x/script>.下載到本地：.**通過npm下載，然后找到dist文件夾中的文件：cnpmivue-D（五）第一個(gè)vue.js應(yīng)用步驟（i）創(chuàng)建一個(gè)網(wǎng)頁模板（承載整個(gè)應(yīng)用）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-widthsinitial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head>

<body></body></html>(2)引入vue.js文件(使用vue框架代碼)SCJ(3)在body中添加一個(gè)div(視圖V層)<divid="app"><p>{{message}}</p></div>(4)在div后面增加script代碼(數(shù)據(jù)模型M層)<script>vanvueApp=newVue({el:*#app',data:{message:'HelloVue.js!}))</script>(5)完整代碼<!DOCTYPEhtnl>-<htmllang?Menw>S<head><metacharset?**UTF-8**><metaname="viewportwcontent=Mwidth=device-width,initial-scale=l.0*><metahttp-equiv="X-UA-Co<npatible"content=Mie=edge">《script5rj"http5：〃/npni/vueg2.5.17/di5t/vue.jsex/58ipt>|0<bodv><divid?*app*><p>{{message}}</p></div>@script§varvueApp工newVue({el:*#app\data:{message:,HelloVue.js!)))“script〉 </body></html>(6)運(yùn)行效果C①:55OO/vue1.html：?：應(yīng)用,&百度一下，你蜘i］道DZL2：家-目擊.HelloVue.js!(7)VM層體現(xiàn)數(shù)據(jù)模型層M與視圖層V雙向綁定，自動(dòng)刷新。在這里我修改了下message的值，然后左側(cè)頁面自動(dòng)刷新修改。

C①:55OO/vue1.html：：:應(yīng)用&百度一下，你般］道DZLZ家-自由、刑?HTML5在線謝牛□百度通滓□正則表達(dá)式S!試工＞O?我是第一個(gè)vue應(yīng)用6DevTools-:55OO/vue1.html[x￡]日ementsConsoleSourcesNetworkPerformanceMQ30top▼Filter Defaultlevels▼G：=Nomessages0Nousermessa...ONoerrorsANowarnings>vueApp<?Vue{_uid:0,_isVue:true,foptions:{1},seLf:Vuej一，>vueApp.message：“我是第一個(gè)vue應(yīng)用”?！拔沂堑谝粋€(gè)vue應(yīng)用”>第一個(gè)vue應(yīng)用說明從上可知：.每個(gè)Vue應(yīng)用都需要通過實(shí)例化Vue來實(shí)現(xiàn)vanvueApp=newVue({//選項(xiàng)｝).對(duì)于頁面中的內(nèi)容，我們目前所知道的為el與data<script>varvueApp=newVue({el:'井a(chǎn)pp，data:{message:'HelloVue.js!)})</script>其中el為element的縮寫，表示綁定DOM元素節(jié)點(diǎn)，data表示vue實(shí)例提供出的數(shù)據(jù),這個(gè)實(shí)例就可以說是【模型數(shù)據(jù)層M】.然后vue實(shí)例中的數(shù)據(jù)，可以通過｛｛｝｝符號(hào)在網(wǎng)頁標(biāo)簽中使用即【視圖v層】

data:{data:{message:*HelloVue.js!}I}) </script></body>.然后在vue實(shí)例中的數(shù)據(jù)我們可以直接通過【實(shí)例名.字段名】訪問HelloVuejs![HQ|top ▼FilterHelloVuejs!：=Nomessages>vueApp.messageA.. <?wHelloVue.is!0Nousermessa這個(gè)字段名是data里面的字段，不是data本身，如果要訪問vue實(shí)例最外層的屬性（如data,el）那么應(yīng)該如下：【實(shí)例名.$字段名】，即前面加個(gè)$符號(hào)。所以以一或者$開頭的實(shí)例不會(huì)被vue實(shí)例代理，因?yàn)橛锌赡軙?huì)和vue內(nèi)置屬性字段沖突，如果要訪問這些屬性可以使用實(shí)例名.$data._prop,但仍然不能直接在實(shí)例模板代碼中使用

HelloVuejs!030top：=NomessagesNousermessa...HelloVuejs!030top：=NomessagesNousermessa...NoerrorsNowarningsNoinfoNoverbose▼Filter>[vueApp.messa旗<?"HelloVue.js!De;ault>.lT0Groupsimilar，[vueApp.'data]<,▼{_ob_:Observer}Omessage:"HelloVue.js!"_ob_:Observer{value: dep:Dep,vmCount:1)getmessage:freactiveGetter()setmessage:/reactiveSetter(neivVal)proto_:Object>|vueApp.$el]<▼(divid-"app"><p>HelloVue.js!</p></div>.由于VM層已經(jīng)被vue框架寫好，所以我們可以直接進(jìn)行數(shù)據(jù)與視圖的雙向綁定修改了模型數(shù)據(jù)內(nèi)容后，視圖自動(dòng)發(fā)生改變C①:5SDevTools-:55OO/vue1.htmlGqElementsConsoleSourcesNetworkPerformance:?比用數(shù)三度一下,，女和我是第一個(gè)vue應(yīng)用Q30top▼Filter Defaultleve：=Nomessages>vueAppONousermessa...ONoerrorsANowarnings?Noinfo<->Vue{_uid:0,_isVue:true,(optionsself:Vue,一}>vueApp.message="我是第一個(gè)vue應(yīng)用”<?”我是第一個(gè)vue應(yīng)用“>7.擴(kuò)展①我們還可以擴(kuò)展下，多給幾個(gè)屬性Wvuei.nnni-vueresx-visualvoaC①:5500/vu文F，泡瑕E型IS)查看(V;省史(G)C①:5500/vu：:：應(yīng)用&百夏一下，你就知澧D■vuel.htmlxzhangsan<!DOCTYPEhtml><hti?l：:：應(yīng)用&百夏一下，你就知澧D■vuel.htmlxzhangsan<!DOCTYPEhtml><hti?llang="en->manHelloVuejs!<head><neta<iaeta<metacharset-"UTF-8->name="viewport"content?MwldthMievlce-wldth(lnitial-scale?1.0">http-equiv?"X-UA-Coa>patible"content-"ie-edge->8910111213141516<title>Document</tltle><scriptsrc--https:〃/np9/vue^2.5.17/dist/vue.js"></script></head><body><divld?"app"><hl>{{name}}</hl><h2>{{sex}}</h2><p>{{message}}</p></dlv>(script>varvueApp-newVue((el:'*app',jaata:(message:"HelloVue.js!name:"zhangsan",sex:"man".</scrlpt></scrlpt></body>?ServertsStartedatport:550(②在vue實(shí)例中el屬性的值可以是一個(gè)選擇器(如上面的#app)，也可以是一個(gè)dom節(jié)點(diǎn)如:<body><divid?"app,*>hl>{{name}}</hl>h2>{{sex}}</h2>p>{{message}}</p></div><script>varvueApp=newVue({Iel:document.getElementById(Mapp"),data:{message:'HelloVue.js!,,name:"zhangsan--",sex:"man”,)})</script></body>

③如果在vue實(shí)例中el屬性的值為class選擇器等非唯一選擇器，那么只有第一個(gè)class選擇器對(duì)應(yīng)的元素會(huì)生效。沒生效的會(huì)直接顯示｛｛數(shù)據(jù)字段名｝｝zhangsan{{name}}{{sex}}{{message)){{name}}{{sex}}{{messagezhangsan{{name}}{{sex}}{{message)){{name}}{{sex}}{{message))</head><podv> _<divclass?-app2">hl>{{name}}</hl></div><divclass>"app2w>hl>{{name}}</hl>h2>{{sex}}</h2>p>{{message}}</p></div>I<div|class-"app2">hl>{{name}}</hl>h2>{{sex}}</h2>p>{{message}}</p></div><script>varvueApp-newVue({|el:.app2\]aaia:(message:"HelloVue.jslname:"zhangsan",sex:"man",}})|</script></body>提示：el的值最好的寫法是id選擇器。當(dāng)然，如果沒有id選擇器，且已經(jīng)獲取到了標(biāo)簽的節(jié)點(diǎn)對(duì)象，那么我們直接使用節(jié)點(diǎn)對(duì)象即可。④對(duì)于vue實(shí)例中data屬性的值，我們還可以引用vue實(shí)例外定義的變置

c①l27.O.O.1:5SOO/vue1.html：應(yīng)用c①l27.O.O.1:5SOO/vue1.html：應(yīng)用一下.你?htmlse$*??zs＞我是vue實(shí)例外定義的對(duì)象<>x<aetanMe?vleMportcontent"Midtn?device-width,initial-$c?ie>l.u?<??(?http-e<|uiv>*X-UACoap4tlbl?"content**ie-?dge*>〈title>Docuaent</title)<scriptsrc?-https:〃cdn.jsde】/np?/vue^2.5.，7/dist/vue.js"></script></h*?d>(body><divida"app'>><hl>{{rwae}}>{{des)}</hl></div>(script〉|〃：三正在V8?:農(nóng)7人號(hào)B上發(fā)展var_obj-{na?e:F，<tes:"ftfivu其陟卜定義ftWtT)〃vg；例v*rvu?App(1:'*?pp

ldata:_obj,l3)-</?crlpt></body>這里要注意了：如果我們引用了外部的對(duì)象，那么我們由于對(duì)象是引用類型，所以在任意一處修改了他的值,那么所以使用此對(duì)象的地方都會(huì)修改—■DevTools-:55OO/vue1.htmlC①:5500/vue1.html-GElementsConsoleSourcesNetworkPerformanceM：■：應(yīng)用 百度一下，例msDzLzr-sa.耐合mml5田s zs＞通過。bj.des修改值?：=2messageszs＞通過。bj.des修改值?：=2messages?02usermessagesONoerrors4,Nowarnings??2infoONoverboseDownloadtheVueDevtoolsextensionforab(developmentexperience:https://github.eom/vue1s/vue-devtool.sYouarerunningVueindevelopmentmode.Makesuretoturnonproductionmodewhendeproduction.SeeworetipsathttD5：2//guide/der>vueA="_「true>vueA_obj.naneitrue>vueApp.des?—_obj.destrue>_obj.des="ifiil_obj.des^^?18"；”)1過.obj.des,改值”實(shí)際上，就算把外部對(duì)象賦值給data的一個(gè)字段也會(huì)如此（因?yàn)閷?duì)象是引用類型）<body><divid=Mapp"><hl>{{}}—>{{obj.des}}</hl></div><script>〃這是在vue實(shí)例外寫的變量var_obj={name:"zs",des:“我是vue實(shí)例外定義的對(duì)象“}//vue實(shí)例varvueApp=newVue({el:data:{obj:_obj,)</script></body>8.總結(jié)從上可知，其實(shí)一個(gè)vue應(yīng)用和我們平常所寫的應(yīng)用基本上沒什么區(qū)別，還是引入一個(gè)js文件到網(wǎng)頁中，然后在網(wǎng)頁里面使用此js文件而已。（像我們通過{{}}符號(hào)，在vue實(shí)例中寫data等都是在js文件里面預(yù)定義好了的）注意：.當(dāng)實(shí)例編譯完成后在通過vueApp.$data.extern等形式添加的字段無法進(jìn)行雙向綁定。.當(dāng)我們使用var定義的vue實(shí)例對(duì)象會(huì)自動(dòng)注入到window上，而使用let定義的vue實(shí)例對(duì)象無法注入到windows中去（其實(shí)不僅是vue實(shí)例，普通變量也是如此）9.小節(jié)練習(xí)

按照此流程構(gòu)建個(gè)最簡(jiǎn)單的vue應(yīng)用，在vue實(shí)例中的data里面寫下你的：姓名，性別，年齡，愛好等幾個(gè)屬性，然后渲染到頁面中去。完了之后在控制臺(tái)通過vue實(shí)例對(duì)象名獲取到相關(guān)信息，進(jìn)行修改，再看頁面效果。（六）瀏覽器上安裝VueDevtoolsVueDevtools是一個(gè)在谷歌瀏覽器上調(diào)試vue應(yīng)用的神器，能提高不少我們?cè)跒g覽器上開發(fā)調(diào)試vue程序的效率。（本質(zhì)上是谷歌瀏覽器的一個(gè)插件）①vuedevtools下載這是編譯好可以直接使用的vuedevtools瀏覽器插件鏈接：https:〃pan./s/lOLOmVIOWkkqbAlqoxACeiQ提取碼：29bn②下載解壓后的目錄w主頁共享查看C:\Users\zl\Desktop\j/ue-devtools\vue-devtools★鍥速訪問C:\Users\zl\Desktop\j/ue-devtools\vue-devtools★鍥速訪問桌囪下我音圖片vueJsLW1804UYQ補(bǔ)諛計(jì)劃名稱buildiconspopups..src■devtools.html■devtools*background.html口manifestjson畫webpack-configjs修改日期類型 大小2018/10/415:06文件夾2018/10/415X)6文件夾2018/10/415:06文件夾2018/10/41506文件夾2018/5/317:10ChromeHTMLD-1KE2018/5/317:10ChromeHTMLD._1KE2018/10/41507JSONAle2KE2018/5/317:10JavaScript文件1KE③將此插件配置到谷歌瀏覽器中.打開谷歌瀏覽器，輸入地址：chrome:〃extensions/

.勾選最右側(cè)的開發(fā)模式砂聲：正?國(guó) .點(diǎn)擊左側(cè)按鈕：二竟已解壓的擴(kuò)展程序ujjsc.??timj、/1u.??=擴(kuò)展程序 Q搜索擴(kuò)展程序力:i載已解壓的擴(kuò)展程序 I打包擴(kuò)展程序更新.選擇解壓后的文件目錄.加載成功后會(huì)出現(xiàn)如下圖所示的變化（網(wǎng)頁中出現(xiàn)vue插件板塊，且地址欄最右邊出現(xiàn)vue圖標(biāo)）

.打開vue應(yīng)用開始使用：按下fl2,會(huì)出現(xiàn)vue的選項(xiàng)卡，點(diǎn)擊開發(fā)調(diào)試vue程序Root▼data：“及昆女曲塞義的，調(diào)試時(shí)，一般可以直接顯示值類型，方法無法顯示調(diào)試，計(jì)算屬性是值類型可以顯示，但是得到這個(gè)值得計(jì)算屬性過程是無法調(diào)整得。（七）安裝vscode插件VueHelpermaybethebestvuecodesnippetsplug-insinVscode,notonlyincludesthevue2allapi,alsocontainsvue-router2andvuex2codeVueTypeScriptSnippetsThisextensionforVisualStudioCodeaddssnippetsforVue/VuexforTypeScriptandHTMLvetur**插值與綁定

前百在第一個(gè)vue應(yīng)用中，我們講解了如何在網(wǎng)頁模板中插入變量即：{{變量名}}但是這種插入和innerText很像，即使我們插入一個(gè)網(wǎng)頁標(biāo)簽，他也只會(huì)渲染位普通的文本，而不會(huì)像innerHTML一樣渲染如:C①：S500/vue1.html那應(yīng)用臺(tái)百ar一C①：S500/vue1.html那應(yīng)用臺(tái)百ar一下,你ttmiDzlzk-bs.嚴(yán)/0htvzs…>我是vue實(shí)脅卜定義的械<h1>hhhh111</h1>vuelJihnlx<Mlaname*viewportcontent-widtn>devicc-widtntinitial-scale>1.0?<actahttp-equlv-"X-UA-Co?patible-content-"le-edge">-title>Docua*nt〃titk>(script$rc?-https:〃cdn.jsdeM/npw/vT2.5.17/dist/vue.”"></script></h?ad>cbody><divid=-app?><div>{{obj.naae}}—>{{obj.dcs}}-:div§</div><$cript>er_obj-{naae:"zs",des:*Svu實(shí)伊^卜主義的對(duì)象<hl>hhhhlll</hl>")//vue^例varvueApp-newVue((el:"?app',data:{<*j：_<*j?!)</$cript></body>那么這里我們就來講講如何在網(wǎng)頁模板以各種形式插入變量值。{{}}：插入與綁定文本（類似與innerText）插入文本就是我們前面講：{{...}}（雙大括號(hào)），這里就不多說了。不過{{}}除了插入文本以外還可以使用JavaScript表達(dá)式進(jìn)行簡(jiǎn)單的運(yùn)算如：

不過這里有一點(diǎn)要注意：{{}}里面只能寫表達(dá)式（三目運(yùn)算符就是做表達(dá)式），而不能寫語句和流程控制。然后，當(dāng)書寫表達(dá)式時(shí)，也不能寫用戶自定義的全局變量。vand=10;〃這就是語句If（n==10）n==100;〃這就是流程控制這些都是不允許的！如果一定要寫流程控制，那么請(qǐng)使用三目運(yùn)算符，實(shí)現(xiàn)三元表達(dá)式來實(shí)v-html指令：插入與綁定【HTML代碼】（類似與innerHTML)如果我們想要在網(wǎng)頁種插入html代碼，而不想只插入文本，那么我們可以使用v-html指令來實(shí)現(xiàn)

如下:如下:C①127Q0.1:5500/vue1.html:v胡冬百度一下,你I快建DZL^T-BS.開1?5M<h1>C①127Q0.1:5500/vue1.html:v胡冬百度一下,你I快建DZL^T-BS.開1?5M<h1>我是vue實(shí)豳淀義的1掇v/h1>我是vue實(shí)例外定義的對(duì)象目<>vuelJitmlx<body><divid="appr-Tfl <dlv>{{obj.des}}</dlv> <divv-ht?l-"obj.des-x/dlv>

16 </div>1718 <script>19〃泣居甘射卜罵的累!20var_obj-{naaie:"zs'.des:"<hl>我是vue文他卜定義的對(duì)象〃hl>-)2122 〃vg例varvueApp-newVue({el:'?app',data:{obj:_obj,n:10,str:"h-e-l-l-o-1?))31 </script>32</body>3334g/htulg汪居、：.當(dāng)一個(gè)網(wǎng)頁標(biāo)簽中同時(shí)存在{{}}來渲染文本，和,v-html指令來渲染html代碼時(shí),一般v-html的內(nèi)容會(huì)覆蓋掉{{}}中的內(nèi)容。.V-html與其他指令基本也是可以用在根節(jié)點(diǎn)上的，不過這樣沒有意義……4.指令含義指令是帶有V-前綴的特殊屬性。指令用于在表達(dá)式的值改變時(shí)，將某些行為應(yīng)用到DOM上③要是在網(wǎng)頁上插入除了文本外的各種值，我們就需要使用到指令v-bind指令：插入與綁定標(biāo)簽【屬性】在vue種給屬性賦值時(shí)，我們需要給屬性名前面加上v-bind指令，在跟上冒號(hào)，然后屬性值種的內(nèi)容就會(huì)被解析為vue實(shí)例變量了。如下所示

C(D:55OO/vue1.html:龍用&百鼻一下,你*(近1DZL2C-B9開C(D:55OO/vue1.html:龍用&百鼻一下,你*(近1DZL2C-B9開2?HTM我是vue實(shí)例外定義的對(duì)象]h~e~LI~o文件(F) &SS，豆K叟G謖相律m<>vuelJitml?<head><iaeta<meta<metacharset-*UTF-8w>naae>>viewport"content^^widthadevice-width,initial-scale>l.8-'http-equlv--X-UA-Coopatlble*'content--ie-edge**<tltle*Docuaent</tltle><scriptsrc?-https:〃/np?/vue^2.5.17/dist/vue.js-></script>262728293031323322IB1926)))</script></body></htal>V-bind綁定的屬性和原生的宜接寫的屬性，可以都寫在標(biāo)簽上面，但是會(huì)以后面的為準(zhǔn)。v-on指令：插入與綁定標(biāo)簽【事件】v-on指令的用法如下:v-on:click="fn"v-on加上一個(gè)冒號(hào)，然后跟上事件名(記住是純粹的事件名，不要加on),再然后等號(hào)后面的值應(yīng)該時(shí)vue實(shí)例中的內(nèi)容：〃vu喚例varvueApp=newVue({el:?#app,data:{htmlv:w<h2>hhh222</h2>w,str:"h-e-l-l-o] |fn:function(){alert(666)L|})

C①C①S500/vue1Jitmla：?：asxhhh222[:5500顯示666:X?(F) MS)BWM[:5500顯示666:X?(F) MS)BWM胃到(G)?E(D)E(T)WC(H)v-model指令：插入與綁定輸入框的值［input】input用來獲取用戶的輸入，在網(wǎng)頁中占據(jù)的比重較為大，所以這里我們就是用單獨(dú)的v-model指令來實(shí)現(xiàn)此功能。C0SSOO/vuel.htmlvuel.html(script></htal><head><meta<meta<meta〃vuW朋varvueApp|</script></body>C0SSOO/vuel.htmlvuel.html(script></htal><head><meta<meta<meta〃vuW朋varvueApp|</script></body><body>卜(qivid="app->,「inputv-i?odel-"str'<title>Docunent'.Ztitle><scriptsrc=**https:〃cdn./np?/vue^2.5.17/dist/vue.js**></script></head>charset-"UTF-8">name」viewport“content?"width?device-width>initial-scale-1.0'http-equiv="X-UA-Co?patible,'content?-ie=edge">qvue1.html-VisualStudioCode文件(F)h-e-H-o注意：v-model指令對(duì)應(yīng)的值只能是vue實(shí)例對(duì)象中的內(nèi)容。v-pre指令：讓所有的vue指令不編譯，原封不

動(dòng)的輸出C①:S500/vue1.html：:r應(yīng)用&百度一下，你就足道DZLZJR-目擊.開汽WJ?vue1.html-vuetest-VisualStudioCode文件時(shí)竭守⑻透瑾(S)M(V)講到(G)濡試⑼線*T)WST(H)vueUitml5.17/dist/vue.</div><hl>hhhlll</hl>"functionalert(66666)</htal>OOAO(script“head〉|</script></body><lnputv-model-"str':WJ?vue1.html-vuetest-VisualStudioCode文件時(shí)竭守⑻透瑾(S)M(V)講到(G)濡試⑼線*T)WST(H)vueUitml5.17/dist/vue.</div><hl>hhhlll</hl>"functionalert(66666)</htal>OOAO(script“head〉|</script></body><lnputv-model-"str':〃cdn.jsde】/i<dlvv-pre>{{str}}</div>〃vue實(shí)例varvueApp<body>IQdivid?"app"0({st川-h-e-1-l-o在我們使用v-bind與v-on指令時(shí)，可以采取縮寫形式,如下:V-bind:id >:id［即v-bind:直接用一個(gè)冒號(hào)來代替】V-on:click >@click【即v-on:直接用一^符號(hào)來代替】實(shí)例如下：<body><divid?'app*><pv-bind:title=wstrwv-on:click="fn"、我是測(cè)試p內(nèi)容l</pxbr)<p:title='strM幽lick=”fn”>我是測(cè)試p內(nèi)容2</pxbr></div><script>〃vue實(shí)例vanvueApp=newVue({el:"#app*,data:{str:Rh-e-l-l-o",hl:M<hl>hhhllK/hl>,\fn:function(){alert(66666)},},})</script></body>10.小節(jié)練習(xí)<!--已知DOM結(jié)構(gòu)如下：<hl>vue綁定與插值練習(xí)</hl><div>divl</div><div>div2</div><div>div3</div><div>div4</div><div>div5<input/><p>輸入框的值為：</p></div><div>div6</div>讓按照如下要求完成內(nèi)容:1.請(qǐng)?jiān)赿ivl中插入vue實(shí)例變量mes,其值為helloword,

2,請(qǐng)?jiān)赿iv2中插入vue實(shí)例變量html,其值為<img/>,然后img的src屬性為一張網(wǎng)絡(luò)圖片地址，alt屬性title屬性值都為【網(wǎng)絡(luò)圖片】.請(qǐng)?jiān)赿iv3中,將vue實(shí)例變量state作為div的contenteditable屬性值，讓div能夠被編輯.請(qǐng)?jiān)赿iv4中用v-on指令綁定點(diǎn)擊事件，彈出一個(gè)彈框，彈出內(nèi)容為：【世界，你好】.請(qǐng)?jiān)赿iv5中用v-model綁定輸入內(nèi)容，然后把這個(gè)輸入的值通過{{}}實(shí)時(shí)的顯示在p標(biāo)簽中.請(qǐng)?jiān)赿iv6中用{{}}符號(hào)把vue實(shí)例中的變量值顯示出來，以中杠線隔開，然后在用v-pre指令讓他們?cè)獠粍?dòng)的顯示.請(qǐng)通過剛剛安裝的vuedev?tools來修改vue實(shí)例中的數(shù)據(jù)內(nèi)容，讓其實(shí)時(shí)渲染到網(wǎng)頁中獨(dú)立完成后，若有不清晰的地方可以參閱一下參考答案：https:〃/zhanHuzhanglu/coursewaresexerciseshomework/blob/master/vue%E7%BB%91%E5%AE%9A%E4%B8%8E%E6%8F%92%E5%80%BC%E7%BB%83%E4%B9%A0.html**指令詳解在上一節(jié)，我們概覽了下一些基礎(chǔ)指令,現(xiàn)在我們就來詳細(xì)的看看在vue中的指令信息。主要分為內(nèi)置指令和自定義指令，如下：(1)基本指令①v-cloak【編譯完成就銷毀】a.作用v-cloak指令并沒什么明顯的作用，不過他會(huì)在隨著vue實(shí)例結(jié)束編譯時(shí)，從綁定的html元素上移除。

b.寫法直接將他寫在標(biāo)簽上就可以了，不需要給他賦任何值，類似于h5中的一些不需要寫值的屬性。<divid="app"v-cloak><pv-bind:title=MstrMv-on:click="fn"、我是測(cè)試p內(nèi)容l</pxbr><p:title=MstrM俱我是測(cè)試p內(nèi)容2</pxbr></div>c.用途雖然這個(gè)標(biāo)簽本身沒什么用，但是由于它具有【隨著vue實(shí)例結(jié)束編譯時(shí)，從綁定的html元素上移除】的特征，所以我們可以解決如下問題。.問題如下當(dāng)我們通過直接引入vue.js文件進(jìn)行簡(jiǎn)單開發(fā)時(shí)（不使用webpack和vue路由）。如果網(wǎng)速較慢，vue.js文件還未加載完成，那么在頁面上會(huì)直接顯示{{str}}等還沒編譯的模板信息?！疚覀兛梢酝ㄟ^開斷點(diǎn)開模擬網(wǎng)速過慢的效果】直到vue實(shí)例創(chuàng)建，模板被編譯后，頁面才會(huì)被替換為真正的內(nèi)容，所以這個(gè)過程就會(huì)發(fā)生一種閃動(dòng)的情況。.解決方式在綁定vue實(shí)例的根結(jié)點(diǎn)標(biāo)簽上添加指令v-cloak,然后再css中通過屬性選擇器通過v-cloak屬性選中這個(gè)根標(biāo)簽，然后設(shè)置display:none,【這樣當(dāng)模板還未編譯時(shí)，整個(gè)頁面都不會(huì)顯示，而是處于隱藏狀態(tài),

不會(huì)發(fā)生閃動(dòng)。而當(dāng)頁面模板編譯完成后，由于v-cloak會(huì)自動(dòng)解除綁定消失，用于隱藏頁面的css代碼會(huì)自動(dòng)失效，頁面會(huì)顯示出來】代碼如下：<metaname=MviewportMcontent?,,width=device-width>initial-scale=1.0M><metahttp-equiv?**X-UA-CompatibleMcontent-Mie?edge"><title>Document</title>《scriptssc="https:〃/np?/vueg2.5.T7/di5t/vuu.js"></script><style>[v-loackl]{display:none;}</style></head> A<body> "|<divid="app"v?cloak>|<pv-bind:title?Mstr"v-on:clickJfn”>我是測(cè)試p內(nèi)容lx/pxbr><p:title-*strM^click/fn"?我是測(cè)試p內(nèi)容2</pxbr></div><script>〃vue實(shí)例varvueApp-newVue({el:'#app,data:{str:"h-e-l-l-o",hl:"<hl>hhhlll</hl>,>,fn:function(){alert(66666)},},))</script></body>3.提示一般情況下，v-cloak是一個(gè)解決初始化慢導(dǎo)致頁面閃動(dòng)的最佳實(shí)踐，對(duì)于簡(jiǎn)單的項(xiàng)目很實(shí)用，但是當(dāng)我們使用webpack+vue-router路由來對(duì)前端進(jìn)行工程化時(shí)，項(xiàng)目的html結(jié)構(gòu)就只有一個(gè)空的div元素，剩余的內(nèi)容全部都會(huì)由路由去掛掛載不同的ui組件，此時(shí)就不再需要v-vloak指令了。

②V-once1只渲染一次】A.作用同v-cloak指令一樣，v-once也不需要表達(dá)式或者值，不過他具有一個(gè)作用，那就是具有這個(gè)屬性的標(biāo)簽或者組件及其子元素，只會(huì)渲染一次vue實(shí)例中的數(shù)據(jù)。在渲染一次后，不管實(shí)例數(shù)據(jù)怎么變化，ui界面不會(huì)再進(jìn)行渲染改變。B.寫法直接將他寫在標(biāo)簽上就可以了，不需要給他賦任何值，類似于h5中的一些不需要寫值的屬性。<divid=wappMv-once><p>{{str}}</p>C.用途V-once在業(yè)務(wù)中很少使用，當(dāng)你需要進(jìn)一步性能優(yōu)化時(shí)，可能會(huì)用至I」。(2)v-if之條件渲染指令①前言和js中的if、else、elseif語句類似，在vue.js中條件指令可以根據(jù)表達(dá)式的值在DOM中渲染或者銷毀元素/組件②v-if、v-else-if、v-else下面代碼含義為:

已知vue實(shí)例中有一個(gè)變量n,如果n=l,就渲染hl,如果n=2,就渲染h2,如果n=3就渲染h3,否則渲染h4.C?:55OO/vue1.html：?"ii百度一下，彳道DZSJvue1.html-vuetest-VisualStudioCode文件(F)編審舊選擇⑸查看(V)^SJ(G)調(diào)試(D)終袋(T)福助(H)<>vue1.htmlx我是h2<body>.ivid="app"v-once^"?我是<>vue1.htmlx我是h2<body>.ivid="app"v-once^"?我是hl卜1<h2v-else-ifJn==2">我是h2〃h2><h3v-else-if3"族是h3</h3><h4v-else</dlv>-<script>我是h4</h4>27282930313233343536〃vue實(shí)例vanvueApp=lnewVue({el:(ffapp*Idata:{IIn:2>str:"h-e-l-l-o",hl:fn:function(){alert(66666)},})</script>③注意.為了使數(shù)據(jù)與視圖雙向綁定，請(qǐng)去掉div標(biāo)簽上的v-once指令。.v-else、v-else-if必須跟在v-if或者v-else-if之后。.V-if也可以如同js中的if一樣，獨(dú)立出現(xiàn)一次或多次<divid="app"><hlv-if="n==l">我是hl[hl><h2v-if="n==2">我是h2</h2><h3v-if="n==3">我是h3</h3><h4v-if="n==4">我是h4</h4></div>.如果一個(gè)標(biāo)簽元素或組件通過v-if隱藏（實(shí)際上是銷毀）了，那么

他的所有子標(biāo)簽子元素等都會(huì)進(jìn)行隱藏（實(shí)際上是銷毀）<divv-if="n==2"><hl>我是hl</hl><h2>我是h2</h2><h3>我是h3</h3>h4>我是h4</h4></div>不過這樣的寫法會(huì)把div標(biāo)簽也給渲染出來，如果你只想純粹的渲染一些元素，而不想渲染包裹他們的父標(biāo)簽元素的話，那么請(qǐng)使用template標(biāo)簽。如下<templatev-if="n==2">hl>我是hl</hl>h2>我是h2</h2>h3>我是h3</h3>h4>我是h4</h4></template>這樣最終渲染完成后不會(huì)包含template標(biāo)簽。.Vue渲染時(shí)出于性能與效率考慮，會(huì)盡可能的復(fù)用已有的元素而非重新渲染。實(shí)例說明一基本代碼如下:

然后你先在輸入框中輸入一些值，然后再修改n的值，會(huì)發(fā)現(xiàn)你所輸入的值并沒有發(fā)生改變，，但是當(dāng)你把值清空后會(huì)發(fā)現(xiàn)placeholder的值變了【這說明vue復(fù)用了你的上一次的input標(biāo)簽，以提高性能】.如果你不想復(fù)用已有元素，那么可以使用vue.js的key屬性，他能阻止元素復(fù)用。Key的值必須是唯一的。(只有加了key的才能阻止復(fù)用)如下，這樣再進(jìn)行切換時(shí)就不會(huì)復(fù)用上一次的input了，不過其他沒加上唯一key的標(biāo)簽還是會(huì)被復(fù)用。<inputplaceholder="666"key="il"v-if="n==l'7><inputplaceholder="777"key='*i2"v-if=,,n==2"/>(4)v-show作用v-show指令的用法和v-if基本類似，可以通過一個(gè)條件來決定是否顯示某些元素。本質(zhì)不過有一點(diǎn)不同的是，通過V-if實(shí)現(xiàn)的顯示或隱藏是把元素進(jìn)行銷毀或者生成，而通過v-show實(shí)現(xiàn)的顯示或者隱藏這是給元素添加的display:none屬性。用法<inputv-show="n==l"key="kl"placeholder="hello"/>

<inputv-show="n==2"key="k2"placeholder^"你好"/>然后這里由于v-show使用的是css樣式display:none來控制的元素隱藏和顯示，所以我們即便加了key屬性也沒用。C①:55OO/vue1.htmlG(jJVueElementsConsoleSourcesNetworkP：：應(yīng)用君百度一下，你就舟1DZLzr-ea.|hello<htmllang="en">?<head>-</head>▼<body>|hello… id="app">==切<inputplaceholder："hello:inputplaceholder-你好ktyledisplay:none;I</div>?<script>-</script><!--Codeinjectedbylive-server-->?<scripttype=text/javascript>~</script></body></html>v-if與v-show的選擇V-if首先v-if才是真正的條件選擇，然后他每次會(huì)根據(jù)條件重新創(chuàng)建或刪除元素，性能開銷較大,適用于不經(jīng)常改變的場(chǎng)景。V-showV-show是通過css樣式來實(shí)現(xiàn)元素的顯示與隱藏，性能開銷小，適用于頻繁切換的條件本來應(yīng)該當(dāng)n的值為2時(shí)才會(huì)顯示結(jié)果等于1他也顯示r說明v-show本來應(yīng)該當(dāng)n的值為2時(shí)才會(huì)顯示結(jié)果等于1他也顯示r說明v-show沒有起效果.<body><divid--app"> |<ta?platev-show-"n-2">|<inputvalue?"6^6"key-^kl"placeholder-"hello**/><inputkey*~k2^^1aceho】der-"你好”/>TOC\o"1-5"\h\z</template〉 ，</dlv> f<script>/〃vue實(shí)例 /varvueAppJnewVue({el:Papp/,data:{'In:i；|str:"h-e-l-l-o",hl:fn:function(){alert(66666)},),1)</script></body>

⑤練習(xí)已知有如下DOM結(jié)構(gòu)<divid="app">p>周一</p>p>周二</p>p>周三</p>p>周四</p>p>周五</p>p>周六</p>p>周日</p)</div>請(qǐng)使用下面三種方式完成，當(dāng)n=l時(shí)，顯示周一對(duì)應(yīng)標(biāo)簽 當(dāng)n=6時(shí)，顯示周六周日對(duì)應(yīng)標(biāo)簽。方式一：只使用v-if方式二：使用v-if,v-else-if,v-else,(提示：周六周日可以嵌套在一個(gè)標(biāo)簽中)方式三：只是用使用v-show指令完成完成后在調(diào)試界面認(rèn)真觀察運(yùn)行時(shí)代碼的情況，比較其區(qū)別。(3)v-for之循環(huán)渲染指令帙見我們己經(jīng)知道，在js中，如果我們要遍歷一個(gè)數(shù)組或者對(duì)象，我們可以使用for或者for?in循環(huán)。在vue.js中的話，如果要遍歷數(shù)組或?qū)ο蟮脑捑鸵褂胿-for指令。這個(gè)指令和for-in循環(huán)非常類似。一個(gè)簡(jiǎn)單的示例vuel.htmlviewport“周日</div><script></script></body><meta<meta〃vu喚例varvueApp<title>Docuaent</title><scriptsrc="https://cdi</head>data:{|days:「周一“，”周二，?周三，?■周四，“周五<body>■Qulv-for?~dayind.:<li><{day}}</li></ul>周二周四周五周六周日查看(S響(G)滑試(D)終途(T)超納(H)幺vue1.html-vuetest-VisualStudioCode用of來代替in關(guān)鍵字實(shí)際上我們也可以使用of來代替in關(guān)鍵字vue1.html‘周四'?休假’</ht?l></div><script>〃vue^例varvueApp<aetana?e=viewportcontent?wiatnsaevice-widtn,initial-scaie?l.0'><aetahttp-equiv?-X-UA-Co?patible"content="ie=edge"><title>Docu?ent<<scriptsrc="https:〃/npa/vue^2.5.U/dist/vue.js"></script></head><body><divid-~app->、<ulv-for?**dayofdays">{{day}}</li>周二周三周四周五文儂BM(E)』vue1.html-vuetest-VisualStudioCodev-for指令-渲染其他各種標(biāo)簽v-for指令常用于渲染列表，但是還可以渲染其他各種標(biāo)簽?上班上班休假<>vue1.html?P<spanv-for?"dayofdays">{{day}}</span><pv-for--dayofdays*>{{day}}</p>洋應(yīng)用&百度一1?上班上班休假<>vue1.html?P<spanv-for?"dayofdays">{{day}}</span><pv-for--dayofdays*>{{day}}</p>洋應(yīng)用&百度一1文件⑹編條(E)選擇⑸查看(V)精到(G)調(diào)試⑻終滿(T)WEn(H)?休假上班休假卜班休假?JJ?vue1.html-vuetest-VisualStudioCode<body><divid="app"><ulv-for-"dayofdays"><li>{{day}}</li>12131415161718,<ahref="#"v-for?"dayofdays”》{{day}}</a>'</div><script>〃vue實(shí)例varvueAppel:,#app'jdata:{})</script></body>使用template標(biāo)簽來包裹要渲染的一批元素如同前面我們講v-if指令時(shí)一樣。當(dāng)我們要一次同時(shí)渲染多個(gè)元素在網(wǎng)頁中時(shí)，我們可以使用〈template〉標(biāo)簽來包裹這些元素，而且渲染完后template標(biāo)簽會(huì)自動(dòng)消失而不會(huì)進(jìn)入到網(wǎng)頁的dom樹中。

C①12gvue1.html-vuetest-VisualStudioCode濟(jì)應(yīng)用a百度一1文件(F)足⑻選擇⑸ 轉(zhuǎn)到(G)潸試(D)^M(T)ttgD(H)上班休假<>vue1.htmlxp</html>我是內(nèi)容我是內(nèi)容</div><script>})</script></body><body><divid?"app"><templatev-for="iteminitems*><hl>{{ite?}}</hl><p>我是內(nèi)容上班休假<>vue1.htmlxp</html>我是內(nèi)容我是內(nèi)容</div><script>})</script></body><body><divid?"app"><templatev-for="iteminitems*><hl>{{ite?}}</hl><p>我是內(nèi)容</template>w曰度一卜，LJZUJR-BM.〃vue實(shí)例vanvueApp?newVue({el:'tapp',data:{fiteins:[”上班-休假上班我是內(nèi)容休假我是內(nèi)容<!uuctyperiuni><htmllang=*'enM>?<head>..</head>▼<body>…▼<divid=**app">=二W<hl>上班</hl>-p>我是內(nèi)容</p■<hl>休假</hl><p>我是內(nèi)容<7p></div>template標(biāo)簽沒有渲染進(jìn)來?<script>w</script><!--Codeinjectedbylive-server-->?<scripttype="text/javascript">?.</script></body></html>V-for的可選參數(shù)記得我們學(xué)習(xí)js時(shí)，對(duì)于forEach方法和map等用來遍歷數(shù)組的方法，他們會(huì)接受一個(gè)回調(diào)函數(shù)作為作為參數(shù)，然后這個(gè)回調(diào)函數(shù)本身又能夠接受三個(gè)參數(shù)。這三個(gè)參數(shù)分別表示【當(dāng)前元素值，當(dāng)前元素下標(biāo)，數(shù)組本身】，如下:

>vararr?[llJ22,33J44,55];<,undefined>arr.forEach(function(value,index,arrSelf){(value,index,arrSelf);});110?(5)[11,22,33,44,55]VM7411:2221?(5)[11,22,33,44,55]VM741L2332?(5)[11,22,33,44,55]VM7411:2443?(5)[11,22,33,44,55]VM741L2554?(5)[11,22,33,44,55]VM7411:2<,undefined在vue.js中也是類似的，我們的v-for?指令在遍歷時(shí)也能夠給上可選參數(shù)：.遍歷數(shù)組時(shí)，遍歷的分別為值與下標(biāo)。.遍歷對(duì)象時(shí)，遍歷的分別為每個(gè)屬性對(duì)應(yīng)的值，鍵，下標(biāo)【索引】。如下tid=艮0?；* A,C①:5：?：應(yīng)用W百度一下，你般］值一-上班下標(biāo) 0值--休假下標(biāo) 1值：ZStt：name下標(biāo)：0值：mankt：sex下標(biāo)：1值：18St：age下標(biāo)：2力?vuei.runi-vuetesx-visualbwaiocoae文件(F)羯瑁(E)選擇⑸查看(V)磐到(G)湃試(D)終族(T)幫助(H)<>vue1.html?22232425262728293031323334353637383940414243444546474849se515253<div><templatev-for=w(item,index)inite?s"><!一遍歷數(shù)組時(shí)，遍歷的分別為值與下標(biāo)一><P>11 {{ite?}}</p><P>下標(biāo) {{index}}</p><hr/>@/templateQ〃div><body><divid="app-><div>—<templatev-for?M(value,key4index)inobj"><!一遍歷對(duì)象每個(gè)屬性時(shí)，遍歷的分別為值，健，下標(biāo)一》<P>值：{{value}}</p><P>鍵：{{key}}</p><p>下標(biāo)：{{index}}</p><hr/></template></div><script>items:「上班”，”休假obj:{name:：*ZS",sex:**man".age:}18,〃vue實(shí)例varvueApp-newVue({el:'#app',data:{V-for還可以迭代整數(shù)實(shí)例:(J(Pl^/.U.U.I八； 文件(F)潮g⑻迷演S)芭一(J(Pl^/.U.U.I八； 文件(F)潮g⑻迷演S)芭一(V)靖方(G)il試(D)絡(luò)濡(T)IS組(H)：：應(yīng)用臺(tái)百度一下.與贓僮DZLZX123 1451——2——3——4——5——vuelhtmlvuel.htmlnuaber">{{n})</hl</html>5->{{n}}5"、{{n}}.</span>gbrg■</span>〃vf例varvueApp-el:'tapp'number:5,Ze?s:［工班,.休假<body>,<divid="app”><hlv-for?"nii<spanv-for-°n<spanv-for="n</div><script>V-for渲染數(shù)組之雙向綁定vue的核心是數(shù)據(jù)與視圖的雙向綁定，當(dāng)我們修改數(shù)組時(shí)，vue會(huì)檢測(cè)到數(shù)據(jù)變化，所以用v-for渲染的視圖也會(huì)立即更新。如：通過以下方法使數(shù)組本身發(fā)生了變化時(shí)會(huì)觸發(fā)更新Push。,pop(),shift。,unshift(),splice。,sort。,reverse。，但是如果我們通過下標(biāo)修改數(shù)組，或者直接修改數(shù)組長(zhǎng)度時(shí)，vue是不能檢測(cè)到的，也不會(huì)觸發(fā)視圖更新。如：**[0]=11;**=1?這兩種方式都不會(huì)被vue檢測(cè)到，都不會(huì)觸發(fā)視圖的更新。如果想這樣做又想被vue檢測(cè)到，那么請(qǐng)使用splice方法來代替擴(kuò)展通過Vue對(duì)象的set方法可以直接實(shí)現(xiàn)通過下標(biāo)修改數(shù)組內(nèi)容，且會(huì)被檢測(cè)到從而更新視圖。如：

C①:55OO/vue1.html

應(yīng)用含ss-t,你8cC①:55OO/vue1.html

應(yīng)用含ss-t,你8c知道Dzlz家-自由、tt——1000000下標(biāo)——0GfijVueElementsConsoleSourcesNetworkPerformance030top ▼Filter Defaultlevels▼2messages?02usermessagesYouarerunningVueindevelopmentmode.Makesuretoturnonproductionmodewhendepproduction.Seemoretipsathttps:〃vue]/guide/deDl下標(biāo)Noerrorsvue-devtoolsDetectedVuev2.5.17Vue.set(vueApp.items,0,1000000);1000000Noverbose練習(xí)題v-for指令練習(xí)練習(xí)一要求一請(qǐng)通過v-for指令將數(shù)組［“周一"，"周二"，"周三"，"周四"，"周五周六"］渲染到頁面上，要求二且請(qǐng)配合v-if指令使用，讓hl把周一包裹，h2把周二包裹， ，h6把周六包裹要求三渲染時(shí)請(qǐng)同時(shí)給出下標(biāo)練習(xí)一效果圖大致如下:下標(biāo)值——周二 下標(biāo) TOC\o"1-5"\h\z值——周三 下標(biāo) 2值 周四 下標(biāo) 3值 周五 下標(biāo) 4值 周六 下標(biāo) 5練習(xí)二要求一、請(qǐng)通過v-for指令將如下對(duì)象數(shù)組渲染到頁面上[{name:Hzs",sex:"man",age:18},{name:"Is",sex:"woman",age:28},{name:"ww”,sex:"woman",age:19},{name:”zl",sex:"man",age:22},]要求二其中每個(gè)人的信息使用div包裹，姓名使用hl包裹，性別和年齡分別用span標(biāo)簽包裹,中間給出中杠線分開，如：性別年齡練習(xí)二效果圖大致如下:

練習(xí)三要求、仍然使用練習(xí)二的數(shù)據(jù)，然后使用兩次v-for指令，將如下對(duì)象數(shù)組渲染到頁面上，再然后要求將其中的所有name字段全部用<b></b>標(biāo)簽包裹。[{name:"zs”,sex:"man",age:18},{name:"Is",sex:"woman".,age:28},{name:"ww",sex:"woman",age:19),{name:"zl",sex:"man",age:22},]練習(xí)三效果圖大致如下:

(4)v-bind之與class與style綁定詳解前言我們已經(jīng)知道了“bind指令可以綁定標(biāo)簽的屬性，而class實(shí)際上也只是標(biāo)簽的一個(gè)屬性，所以我們可以使用v-bind指令來綁定標(biāo)簽class以控制樣式，然后我們也知道了v-bind:的語法糖(縮寫)為一個(gè)冒號(hào)?，F(xiàn)在我們就來探究下通過v-bind來綁定class的幾種方式.給v-bind:class設(shè)置一個(gè)文本值即當(dāng)作一個(gè)普通屬性來綁定一個(gè)值，這是最簡(jiǎn)單的綁定

ppppppppp注意：即便我們使用了v-bind:class=class值后，我們?nèi)匀豢梢酝瑫r(shí)使用class來賦值，和原來的方式一樣。（這是因?yàn)閏lass本來就運(yùn)許多個(gè)值，如果是其他屬性，那么一般而言是后面的覆蓋前面的值）.給v-bind:class設(shè)置一個(gè)對(duì)象【推薦】可以通過v-bind直接給class綁定一個(gè)對(duì)象，這時(shí)候，對(duì)象中的每個(gè)屬性的鍵（key）都是class的一個(gè)值，而這些屬性的值就決定了是否把這個(gè)屬性的key作為類名應(yīng)用到標(biāo)簽上。

【這就更加利于我們控制class,畢竟對(duì)象操作起來比字符串方便多了?！繉?shí)例當(dāng)屬性的值為false時(shí)，對(duì)應(yīng)的屬性的鍵就不會(huì)作為類名應(yīng)用到標(biāo)簽上，為true時(shí)就會(huì)被應(yīng)用上去，所以下圖中就只有divblue會(huì)被作為class的一個(gè)值應(yīng)用到標(biāo)簽上（如果都為真，那么由于class本來就接收多個(gè)值，所以所有的鍵就會(huì)全部作為calss的值，但是當(dāng)樣式?jīng)_突時(shí),標(biāo)簽最終決定使用哪一個(gè)class,還是根據(jù)類本身定義的位置來說的，而不是我們?cè)跇?biāo)簽中放置的位置）我們還來可以直接在v-bind：class上寫對(duì)象，如下:

IUetL2.JT7divredl'bonders<p>ppppppppp</p></div></div>|</style></head>IUetL2.JT7divredl'bonders<p>ppppppppp</p></div></div>|</style></head>solid□red〃vue實(shí)例vanvueApp-newdata:{isdivbluel:trueisdivredl:false網(wǎng)英力?，簡(jiǎn)◎:{10pxsolidOblue;<style>.divbluelborder:<body> \<divid?"pp">，<div|:class="{'divbluel':isdivbluel,'di^edl':isdivred￡p*j>})</script></body>?ServerisStartedatport:5500.給v-bind:class設(shè)置一^數(shù)組我們還可以通過v-bind:class給標(biāo)簽綁定一個(gè)數(shù)組，這樣數(shù)組的每個(gè)元素都會(huì)作為標(biāo)簽的calss屬性的一個(gè)值，如下：1）基本實(shí)例C①:S500/vue1.html1文件(F) 酬(S):看(V)W到(G)31試(D)蟋■(!)襄助(H)：?應(yīng)用&百度一下.你|快hi口ZLZT-Sa.開丁9HTML5在線il佳C①:S500/vue1.html1文件(F) 酬(S):看(V)W到(G)31試(D)蟋■(!)襄助(H)：?應(yīng)用&百度一下.你|快hi口ZLZT-Sa.開丁9HTML5在線il佳□百3r備忘靈txtPPPPPPPPP0Py</htal></style></head>.divse{font-size:50px;}.divredl{border:2pxsolidDred;<scriptsrc?**https:〃cdn./i<>vuelJKmlx>te,tntml0body0<dlvid="app-><div[:class?"arr"><PPPPPPP</p></div></div><script>〃vu演暫varvuarrj「div5e，-divredl"],isdivbluel:true,isdivredl:false.})“script〉</body>p?newVue({由于js是弱類型的語言，所以我們可以給數(shù)組元素放入三元表達(dá)式，或者放入對(duì)象等2)給數(shù)組元素放入三元表達(dá)式C①5500/vuel.htnMn文件(f)1*E)涮MS)5B(V| *at(D) 碧劭(H):::應(yīng)用金百要一下.你就用！BZL2K-B3.產(chǎn)于?HTM15=0edvuelJUmlxte-jh-f；：r務(wù)忘錄.txtPPPPPPPPP0a(scriptsrc-'<style>})</script></body><aetaname*viewportcontent-widtn>aevice-wiatn,i<metahttp-equiv^'X-UA-Conpatible"content--ie-edge"<title>DocuMent</title>://cdn.jsdelivr.!.divse{font-size:S0px;.divredl{border:2pxsolidDred;</style></head><body><dlvld>"app"><div：class--arr-><PPPPPPPPPP*r</div></div><script>〃vue實(shí)例varvueApp-newVue({el:'，app，data:{arrf[-div50-A>eTdivredl":-]3)給數(shù)組元素放入一個(gè)對(duì)象C①:55OO/vue1.html |：:,應(yīng)用痣百度一下，你就知道DZLzr-ea.舟?C①:55OO/vue1.html |：:,應(yīng)用痣百度一下，你就知道DZLzr-ea.舟?htmls在跑1件□=1文倬⑹濾jg，E卻s ^到（G）得MQ；修質(zhì)E到吃的vue1.html?tes?'i-ml任備忘錄.txt16112829303233343536<netaname>viewportcontent-widtn?aevice-wiatn(,iretahttp-equiv-"X-UA-Coaipatlble"contentS"ie>edge<title>OocuKnt</title><scriptsrc""https:〃cdn.jsdelivr.ne，<style>.divse{font-size:50px;.divredl{border:2pxsolid口red;</style></head><body>I<dlvld="app">廣<div:class--arr-><p-ppppppppp/p>K</div> X0/遍 ,(script〉〃vije^例varvueApp-newVue({el:'#app',data:{dlvredl:true)；uefi2.S.l))|</$cript></body>4）直接將數(shù)組元素寫在標(biāo)簽上<div:class="[*div50'{divredl:true}]M>'divSC'l如果數(shù)組中的元素是vue實(shí)例中過的數(shù)據(jù)，那么可以直接寫變量名，而不需要如同一樣給上引號(hào)。'divSC'l.給v-bind:style綁定內(nèi)聯(lián)樣式1）以前直接在style上寫行內(nèi)樣式<divstyle="color:yellow;font-size:50px;H>2）在vue中可以通過v-bind:style綁定行內(nèi)樣式，且有對(duì)象與數(shù)組兩種寫法：A.對(duì)象寫法【推薦】

C(D127.0A1:5500/vue1Jitn?l：?：SKAC(D127.0A1:5500/vue1Jitn?l：?：SKA百度一下.休glDzlzx-aa先fvue1.htmltesthtml</htal></$crlpt></body><body><divid"*app">?di\:$tyle--obj-":PPPPPPPPP；</div></div><script>〃vuNt例vanvueApp-newVlel:"ffapp",d>t」:{HTML5ffiefc??r向GEQWT)B.數(shù)組寫法實(shí)際上數(shù)組寫法，也

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論