Vue詳細(xì)基礎(chǔ)全教程（一）

上傳人：依*** IP屬地：重慶上傳時(shí)間：2024-04-25 格式：DOCX 頁數(shù)：45 大?。?0.44KB 積分：1.2 舉報(bào) 版權(quán)申訴

已閱讀5頁，還剩40頁未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡(jiǎn)介

Vue詳細(xì)基礎(chǔ)全教程（一）一、Vue.js概述1、什么是Vue.jsVue.js是目前最火的一個(gè)前端框架，React是最流行的一個(gè)前端框架（React除了開發(fā)網(wǎng)站，還可以開發(fā)手機(jī)App，Vue語法也是可以用于進(jìn)行手機(jī)App開發(fā)的，需要借助于Weex）Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成為前端三大主流框架！Vue.js是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。（Vue有配套的第三方類庫，可以整合起來做大型項(xiàng)目的開發(fā)）。在Vue中，一個(gè)核心的概念，就是讓用戶不再操作DOM元素，解放了用戶的雙手，讓程序員可以更多的時(shí)間去關(guān)注業(yè)務(wù)邏輯；2、框架和庫的區(qū)別框架：是一套完整的解決方案；對(duì)項(xiàng)目的侵入性較大，項(xiàng)目如果需要更換框架，則需要重新架構(gòu)整個(gè)項(xiàng)目。庫（插件）：提供某一個(gè)小功能，對(duì)項(xiàng)目的侵入性較小，如果某個(gè)庫無法完成某些需求，可以很容易切換到其它庫實(shí)現(xiàn)需求。（比如從jQuery切換到Zepto等）3、MVC與MVVM區(qū)別與聯(lián)系MVC是后端的分層開發(fā)概念；M為數(shù)據(jù)層，V視圖層，C邏輯層。MVVM是前端視圖層的概念，主要關(guān)注于視圖層分離，也就是說：MVVM把前端的視圖層，分為了三部分Model,View,VMViewModel。其中VM是中間層，負(fù)責(zé)協(xié)調(diào)V層和M層，V層即視圖層（對(duì)應(yīng)的就是DOM元素），就是我們的網(wǎng)頁html結(jié)構(gòu)，M層就是網(wǎng)頁里面的數(shù)據(jù)（對(duì)應(yīng)的就是JavaScript對(duì)象）。4、虛擬DOM當(dāng)你用傳統(tǒng)的源生api或jQuery去操作DOM時(shí)，瀏覽器會(huì)從構(gòu)建DOM樹開始從頭到尾執(zhí)行一遍流程。比如當(dāng)你在一次操作時(shí)，需要更新10個(gè)DOM節(jié)點(diǎn)，理想狀態(tài)是一次性構(gòu)建完DOM樹，再執(zhí)行后續(xù)操作。但瀏覽器沒這么智能，收到第一個(gè)更新DOM請(qǐng)求后，并不知道后續(xù)還有9次更新操作，因此會(huì)馬上執(zhí)行流程，最終執(zhí)行10次流程。顯然例如計(jì)算DOM節(jié)點(diǎn)的坐標(biāo)值等都是白白浪費(fèi)性能，可能這次計(jì)算完，緊接著的下一個(gè)DOM更新請(qǐng)求，這個(gè)節(jié)點(diǎn)的坐標(biāo)值就變了，前面的一次計(jì)算是無用功。真實(shí)的DOM節(jié)點(diǎn)，哪怕一個(gè)最簡(jiǎn)單的div，也會(huì)有特別多的屬性。虛擬DOM就是為了解決這個(gè)瀏覽器性能問題而被設(shè)計(jì)出來的。虛擬DOM和真實(shí)DOM之間會(huì)有一個(gè)映射的關(guān)系。例如前面的例子，假如一次操作中有10次更新DOM的動(dòng)作，虛擬DOM不會(huì)立即操作DOM，而是將這10次更新的diff內(nèi)容保存到本地的一個(gè)js對(duì)象中，最終將這個(gè)js對(duì)象一次性渲染到DOM樹上，通知瀏覽器去執(zhí)行繪制工作，這樣可以避免大量的無謂的計(jì)算量。二、Vue.js基本結(jié)構(gòu)Vue.js的基本結(jié)構(gòu)主要分三塊：1、導(dǎo)入Vue的包；2、body中的設(shè)置一個(gè)被vue控制的區(qū)域（元素）；3、在script中new一個(gè)vue實(shí)例，參數(shù)為一個(gè)對(duì)象，對(duì)象中一般有三個(gè)元素為

el，data，methodsel則關(guān)聯(lián)body中被vue控制的元素的id或類名。data則存放頁面的數(shù)據(jù)；methods為頁面事件對(duì)象集合。示例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><scriptsrc="./lib/vue-2.4.0.js"></script></head><body><divid="app"><p>{{info}}</p></div><script>//2.創(chuàng)建一個(gè)Vue的實(shí)例//當(dāng)我們導(dǎo)入包之后，在瀏覽器的內(nèi)存中，就多了一個(gè)Vue構(gòu)造函數(shù)//注意：我們new出來的這個(gè)vm對(duì)象，就是我們MVVM中的VM調(diào)度者varvm=newVue({el:'#app',//表示，當(dāng)前我們new的這個(gè)Vue實(shí)例，要控制頁面上的哪個(gè)區(qū)域//這里的data就是MVVM中的M，專門用來保存每個(gè)頁面的數(shù)據(jù)的data:{//data屬性中，存放的是el中要用到的數(shù)據(jù)info:'歡迎學(xué)習(xí)Vue';//通過Vue提供的指令，很方便的就能把數(shù)據(jù)渲染到頁面上，程序員不再手動(dòng)操作DOM元素了【前端的Vue之類的框架，不提倡我們?nèi)ナ謩?dòng)操作DOM元素了】}})</script></body></html>{{info}}：在html中可以直接使用

雙重大括號(hào)

的方式使用data中的數(shù)據(jù)。三、Vue指令1、插值表達(dá)式插值表達(dá)式就是以雙重大括號(hào)

，類似

的形式插入到html代碼中。1、插值表達(dá)式還可以進(jìn)行簡(jiǎn)單的運(yùn)算（比如加減乘除等），但是不能完全放置js代碼。2、插值表達(dá)式只能放在標(biāo)簽之間，而不能放在標(biāo)簽內(nèi)部。使用

v-once

也能執(zhí)行一次性地插值，但是當(dāng)數(shù)據(jù)改變時(shí)，插值處的內(nèi)容不會(huì)更新。<spanv-once>這個(gè)將不會(huì)改變:{{info}}</span>2、v-cloak在使用

的方式插入數(shù)據(jù)的時(shí)候，如果網(wǎng)速特別慢的話，

所代表的值不會(huì)立即顯示出來，而會(huì)顯示{{info}}這個(gè)字符串本身，怎么解決這個(gè)問題呢？使用v-cloak和CSS表達(dá)式結(jié)合，能夠解決插值表達(dá)式閃爍的問題，這樣會(huì)在網(wǎng)絡(luò)未加載完時(shí)，不顯示字符串本身。示例：<style>[v-cloak]{display:none;}</style>...<pv-cloak>{{info}}</p>3、v-text默認(rèn)v-text是沒有閃爍問題的，但是v-text會(huì)覆蓋元素中原本的內(nèi)容，而v-cloak只會(huì)替換插值表達(dá)式，不會(huì)把整個(gè)元素的內(nèi)容清空。<spanv-text="info"></span>4、v-htmlv-text只是插入的純文本格式內(nèi)容，而v-html可以插入為html標(biāo)簽的代碼，并解析出來。<spanv-html="info"></span>...data:{info:'<h1>哈哈，我是一個(gè)大大的H1，我大，我驕傲</h1>'}1、v-html會(huì)將整個(gè)標(biāo)簽替換為info的內(nèi)容。2、你的站點(diǎn)上動(dòng)態(tài)渲染的任意HTML可能會(huì)非常危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致XSS攻擊。請(qǐng)只對(duì)可信內(nèi)容使用HTML插值，絕不要對(duì)用戶提供的內(nèi)容使用插值。5、v-bindv-bind是Vue中，提供的用于綁定屬性的指令。將一個(gè)屬性的值變成動(dòng)態(tài)值。注意：

v-bind:

指令可以被簡(jiǎn)寫為:<inputtype="button"value="按鈕"v-bind:title="mytitle+'123'">...data:{mytitle:'這是一個(gè)自己定義的title'}title里面的內(nèi)容就不是字符串了，而是會(huì)將data中的變量進(jìn)行替換得到一個(gè)字符串整體。溫馨提示：上面的例子中，我們一直都只綁定簡(jiǎn)單的屬性鍵值。但實(shí)際上，對(duì)于所有的數(shù)據(jù)綁定，Vue.js都提供了完全的JavaScript表達(dá)式支持。如下都是可以的：{{number+1}}{{ok?'YES':'NO'}}{{message.split('').reverse().join('')}}<divv-bind:id="'list-'+id"></div>注意：每個(gè)綁定都只能包含單個(gè)表達(dá)式，所以下面的例子都不會(huì)生效。{{vara=1}}{{if(ok){returnmessage}}}6、v-onv-on：給某個(gè)元素綁定事件監(jiān)聽函數(shù)。注意，函數(shù)必須封裝在methods內(nèi)。注意：v-on:

指令可以被簡(jiǎn)寫為@<inputtype="button"value="按鈕":title="mytitle+'123'"v-on:click="show">...data:{mytitle:'這是一個(gè)自己定義的title'},methods:{//這個(gè)methods屬性中定義了當(dāng)前Vue實(shí)例所有可用的方法show:function(){ alert('Hello')}}在點(diǎn)擊按鈕的時(shí)候，會(huì)自動(dòng)調(diào)用methods中的show方法。案例：字體滾動(dòng)播放<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><scriptsrc="./lib/vue-2.4.0.js"></script></head><body><divid="box"><inputtype="button"value="搖起來"id="btn1"@click="move"><inputtype="button"value="停下來"id="btn2"@click="stop"><h2v-text="info"></h2></div><script>varvm=newVue({el:"#box",data:{info:"落霞與孤鶩齊飛，秋水共長(zhǎng)天一色。",timeId:null},methods:{move:function(){if(this.timeId!=null){clearInterval(this.timeId);}varthat=this;this.timeId=setInterval(function(){varstart=.substring(0,1);varend=.substring(1);=end+start;},200);},stop:function(){clearInterval(this.timeId);}}});</script></body></html>注意：1、在VM對(duì)象實(shí)例中，如果想要獲取data上的數(shù)據(jù)，或者想要調(diào)用methods中的方法，必須通過

this.數(shù)據(jù)屬性名

或

this.方法名

來進(jìn)行訪問，這里的this，就表示我們new出來的VM實(shí)例對(duì)象。2、VM實(shí)例，會(huì)自動(dòng)監(jiān)聽自己身上data中所有數(shù)據(jù)的改變，只要數(shù)據(jù)一發(fā)生變化，就會(huì)自動(dòng)把最新的數(shù)據(jù)，從data上同步到頁面中去；【好處：程序員只需要關(guān)心數(shù)據(jù)，不需要考慮如何重新渲染DOM頁面】\t"/Daotin/Web/blob/master/12-Vue/_blank"動(dòng)態(tài)參數(shù)【2.6.0新增內(nèi)容】從2.6.0開始，可以用方括號(hào)括起來的JavaScript表達(dá)式作為一個(gè)指令的參數(shù)：<av-bind:[attributeName]="url">...</a>現(xiàn)在attributeName也是動(dòng)態(tài)的了。如果Vue實(shí)例有一個(gè)data屬性attributeName，其值為"href"，那么這個(gè)綁定將等價(jià)于v-bind:href。同樣地，你可以使用動(dòng)態(tài)參數(shù)為一個(gè)動(dòng)態(tài)的事件名綁定處理函數(shù)：<av-on:[eventName]="doSomething">...</a>同樣地，當(dāng)eventName的值為"focus"時(shí)，v-on:[eventName]將等價(jià)于v-on:focus。注意：1、如果動(dòng)態(tài)參數(shù)attributeName預(yù)期會(huì)求出一個(gè)字符串，異常情況下值為null。**這個(gè)特殊的null值可以被顯性地用于移除綁定。**任何其它非字符串類型的值都將會(huì)觸發(fā)一個(gè)警告。2、動(dòng)態(tài)參數(shù)中不能有空格或引號(hào)，你可以使用計(jì)算屬性替代這種復(fù)雜表達(dá)式。如：<av-bind:['foo'+bar]="value">...</a>3、如果在DOM中使用動(dòng)態(tài)參數(shù)的話，需要留意瀏覽器會(huì)把特性名全部強(qiáng)制轉(zhuǎn)為小寫：<av-bind:[someAttr]="value">...</a>

，在DOM中使用模板時(shí)這段代碼會(huì)被轉(zhuǎn)換為

v-bind:[someattr]7、v-modelv-bind只能實(shí)現(xiàn)數(shù)據(jù)的單向綁定，從M自動(dòng)綁定到V（即修改data的數(shù)據(jù)，自動(dòng)同步到html），無法實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。使用v-model指令，可以實(shí)現(xiàn)表單元素和Model中數(shù)據(jù)的雙向數(shù)據(jù)綁定（不僅可以修改data的數(shù)據(jù)，自動(dòng)同步到html，也可以修改html的代碼，同步到data數(shù)據(jù)）。注意：v-model只能運(yùn)用在

表單元素中。示例：<inputtype="text"style="width:100%;"v-model="info">...data:{ info:'hellovue.'},案例：簡(jiǎn)單的計(jì)算器<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./lib/vue-2.4.0.js"></script></head><body><divid="app"><inputtype="text"v-model="n1"><selectv-model="opt"><optionvalue="+">+</option><optionvalue="-">-</option><optionvalue="*">*</option><optionvalue="/">/</option></select><inputtype="text"v-model="n2"><inputtype="button"value="="@click="calc"><inputtype="text"v-model="result"></div><script>//創(chuàng)建Vue實(shí)例，得到ViewModelvarvm=newVue({el:'#app',data:{n1:0,n2:0,result:0,opt:'+'},methods:{calc:function(){//計(jì)算器算數(shù)的方法//邏輯：switch(this.opt){case'+':this.result=parseFloat(this.n1)+parseFloat(this.n2)break;case'-':this.result=parseFloat(this.n1)-parseFloat(this.n2)break;case'*':this.result=parseFloat(this.n1)*parseFloat(this.n2)break;case'/':this.result=parseFloat(this.n1)/parseFloat(this.n2)break;}}}});</script></body></html>8、v-for8.1、v-for循環(huán)普通數(shù)組我們之前如果要循環(huán)賦值給p標(biāo)簽data中l(wèi)ist=[1,2,3,4,5,6];數(shù)組的話，會(huì)這樣寫：<body><divid="app"><p>{{list[0]}}</p><p>{{list[1]}}</p><p>{{list[2]}}</p><p>{{list[3]}}</p><p>{{list[4]}}</p></div><script>varvm=newVue({el:'#app',data:{list:[1,2,3,4,5,6]},methods:{}});</script></body>這樣的話，就會(huì)很繁瑣。而v-for會(huì)提供循環(huán)遍歷list數(shù)組來給p標(biāo)簽賦值。如下：<body><divid="app"><pv-for="(item,i)inlist">索引：{{i}}---項(xiàng)：{{item}}</p></div><script>varvm=newVue({el:'#app',data:{list:[1,2,3,4,5,6]},methods:{}});</script></body>8.2、v-for循環(huán)對(duì)象數(shù)組<body><divid="app"><pv-for="(user,i)inlist">Id：{{user.id}}---名字：{{}}---索引：{{i}}</p></div><script>varvm=newVue({el:'#app',data:{list:[{id:1,name:'zs1'},{id:2,name:'zs2'},{id:3,name:'zs3'},{id:4,name:'zs4'}]},methods:{}});</script></body>8.3、v-for循環(huán)對(duì)象<body><divid="app"><pv-for="(val,key,i)inuser">值是：{{val}}---鍵是：{{key}}--索引：{{i}}</p></div><script>varvm=newVue({el:'#app',data:{user:{id:1,name:'TonyStark',gender:'男'}},methods:{}});</script></body>8.4、v-for循環(huán)數(shù)字<body><divid="app"><pv-for="countin10">這是第{{count}}次循環(huán)</p></div><script>//創(chuàng)建Vue實(shí)例，得到ViewModelvarvm=newVue({el:'#app',data:{},methods:{}});</script></body>注意：如果使用v-for迭代數(shù)字的話，前面的count值從1開始。8.5、v-for循環(huán)key屬性key屬性可以使得每一遍歷的項(xiàng)是唯一的。<body><divid="app"><div><label>Id:<inputtype="text"v-model="id"></label><label>Name:<inputtype="text"v-model="name"></label><inputtype="button"value="添加"@click="add"></div><pv-for="iteminlist":key="item.id"><inputtype="checkbox">{{item.id}}---{{}}</p></div><script>//創(chuàng)建Vue實(shí)例，得到ViewModelvarvm=newVue({el:'#app',data:{id:'',name:'',list:[{id:1,name:'李斯'},{id:2,name:'嬴政'},{id:3,name:'趙高'},{id:4,name:'韓非'},{id:5,name:'荀子'}]},methods:{add(){//添加方法this.list.unshift({id:this.id,name:})}}});</script></body>你也可以用of替代in作為分隔符，因?yàn)樗咏麶avaScript迭代器的語法：<divv-for="itemofitems"></div>9、v-if/v-showv-if和v-show都可以控制元素的顯示與否。但是實(shí)現(xiàn)原理不同。v-if：決定某些元素是否存在(加載性能更高,某個(gè)元素不需要被頻繁切換時(shí),則應(yīng)該使用v-if)v-show：決定某些元素是否顯示(操作性能更高,如果某個(gè)元素需要被頻繁切換,則應(yīng)該使用v-show)v-if：每次都會(huì)重新刪除或創(chuàng)建元素。v-show：每次不會(huì)重新進(jìn)行DOM的刪除和創(chuàng)建操作，只是切換了元素的display:none樣式。所以，如果元素涉及到頻繁的切換，最好不要使用v-if,而是推薦使用v-show；如果元素可能永遠(yuǎn)也不會(huì)被顯示出來被用戶看到，則推薦使用v-if。<h3v-if="true">這是用v-if控制的元素</h3><h3v-show="true">這是用v-show控制的元素</h3>有了v-if就有v-else-if和v-elsev-if和v-show指令中除了可以放簡(jiǎn)單的值外，還可以放表達(dá)式：<h3v-if="age<18">這是用v-if控制的元素</h3><h3v-else-if="age<28">這是用v-if控制的元素</h3><h3v-else>這是用v-if控制的元素</h3>注意：v-if和v-else-if和v-else之間，不要加任何其他元素，否則會(huì)報(bào)錯(cuò)。用key管理可被復(fù)用的元素(來自官方文檔)Vue會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開始渲染。這么做除了使Vue變得非?？熘?，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換：<templatev-if="loginType==='username'"><label>Username</label><inputplaceholder="Enteryourusername"></template><templatev-else><label>Email</label><inputplaceholder="Enteryouremailaddress"></template>那么在上面的代碼中切換loginType將不會(huì)清除用戶已經(jīng)輸入的內(nèi)容。因?yàn)閮蓚€(gè)模板使用了相同的元素，不會(huì)被替換掉——僅僅是替換了它的placeholder。這樣也不總是符合實(shí)際需求，所以Vue為你提供了一種方式來表達(dá)“這兩個(gè)元素是完全獨(dú)立的，不要復(fù)用它們”。只需添加一個(gè)具有唯一值的key屬性即可：<templatev-if="loginType==='username'"><label>Username</label><inputplaceholder="Enteryourusername"key="username-input"></template><templatev-else><label>Email</label><inputplaceholder="Enteryouremailaddress"key="email-input"></template>現(xiàn)在，每次切換時(shí)，輸入框都將被重新渲染。但是，label元素仍然會(huì)被高效地復(fù)用，因?yàn)樗鼈儧]有添加key屬性?！局匾勘苊鈜-if和v-for用在同一個(gè)元素上(來自官方文檔)主要原因：v-for比v-if具有更高的優(yōu)先級(jí)。一般我們?cè)趦煞N常見的情況下會(huì)傾向于這樣做：為了過濾一個(gè)列表中的項(xiàng)目(比如v-for="userinusers"v-if="user.isActive")。在這種情形下，請(qǐng)將users替換為一個(gè)計(jì)算屬性(比如activeUsers)，讓其返回過濾后的列表。為了避免渲染本應(yīng)該被隱藏的列表(比如v-for="userinusers"v-if="shouldShowUsers")。這種情形下，請(qǐng)將v-if移動(dòng)至容器元素上(比如ul,ol)。詳解以上兩點(diǎn)：1、當(dāng)Vue處理指令時(shí)，v-for比v-if具有更高的優(yōu)先級(jí)，所以這個(gè)模板：<ul><liv-for="userinusers"v-if="user.isActive":key="user.id">{{}}</li></ul>將會(huì)進(jìn)行如下計(jì)算：this.users.map(function(user){if(user.isActive){return}})因此哪怕我們只渲染出一小部分用戶的元素，也得在每次重渲染的時(shí)候遍歷整個(gè)列表，不論活躍用戶是否發(fā)生了變化。因此，通過將其更換為在如下的一個(gè)計(jì)算屬性上遍歷：computed:{activeUsers:function(){returnthis.users.filter(function(user){returnuser.isActive})}}<ul><liv-for="userinactiveUsers":key="user.id">{{}}</li></ul>我們將會(huì)獲得如下好處：過濾后的列表只會(huì)在users數(shù)組發(fā)生相關(guān)變化時(shí)才被重新運(yùn)算，過濾更高效。使用v-for="userinactiveUsers"之后，我們?cè)阡秩镜臅r(shí)候只遍歷活躍用戶，渲染更高效。2、第二個(gè)場(chǎng)景我們將shouldShowUsers放到ul上：<ul><liv-for="userinusers"v-if="shouldShowUsers":key="user.id">{{}}</li></ul>更改為：<ulv-if="shouldShowUsers"><liv-for="userinusers":key="user.id">{{}}</li></ul>通過將v-if移動(dòng)到容器元素，我們不會(huì)再對(duì)列表中的每個(gè)用戶檢查shouldShowUsers。取而代之的是，我們只檢查它一次，且不會(huì)在shouldShowUsers為否的時(shí)候運(yùn)算v-for。四、Vue中的樣式1、動(dòng)態(tài)class（使用v-bind綁定）<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scriptsrc="./lib/vue-2.4.0.js"></script><style>.red{color:red;}.thin{font-weight:200;}.italic{font-style:italic;}.active{letter-spacing:0.5em;}</style></head><body><divid="app"><h1:class="['thin','italic']">這是一個(gè)很大很大的H1</h1><h1:class="['thin','italic',flag?'active':'']">這是一個(gè)很大很大的H1</h1><h1:class="['thin','italic',{active:flag}]">這是一個(gè)很大很大的H1</h1><h1:class="classObj">這是一個(gè)很大很大的H1</h1></div><script>//創(chuàng)建Vue實(shí)例，得到ViewModelvarvm=newVue({el:'#app',data:{flag:true,classObj:{red:true,thin:true,italic:false,active:false}},methods:{}});</script></body></html>注意：1、class樣式需要使用v-bind綁定。2、class類樣式可以是數(shù)組和對(duì)象集合。3、動(dòng)態(tài)class可以和靜態(tài)class并存，但是靜態(tài)class不能和靜態(tài)class并存，動(dòng)態(tài)class也不能和動(dòng)態(tài)class并存。標(biāo)簽頁案例<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>a{padding:5px10px;display:inline-block;}.active{color:#fff;background-color:salmon;}</style></head><body><divid="app"><ahref="javascript:;":class="{active:item.active}"v-for="(item,i)intabs"@click="changeTab(i)">{{item.title}}</a><ul><liv-for="(item,i)intabs"v-show="item.active"><h2>{{item.content}}</h2></li></ul></div></body><scriptsrc="/npm/vue/dist/vue.js"></script><script>letapp=newVue({el:'#app',data:{tabs:[{title:'tab1',content:'內(nèi)容1',active:true},{title:'tab2',content:'內(nèi)容2',active:false},{title:'tab3',content:'內(nèi)容3',active:false}]},methods:{chang

人人文庫> 全部分類> 行業(yè)資料 > 信息產(chǎn)業(yè)

溫馨提示

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ì)自己和他人造成任何形式的傷害或損失。

Vue詳細(xì)基礎(chǔ)全教程（一）

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

Vue詳細(xì)基礎(chǔ)全教程（一）

文檔簡(jiǎn)介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔