Vue的學(xué)習(xí)筆記（中篇）
點擊上方“IT共享之家”，進行關(guān)注
回復(fù)“資料”可獲贈Python學(xué)習(xí)福利
一、什么是Vue.js?
Vue 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。上篇文章我們講述了基礎(chǔ)，可以戳這里：Vue的學(xué)習(xí)筆記（上篇）。這篇文章我們繼續(xù)捋一捋~
二、Vue中使用樣式class
第一種使用方式，傳遞一個數(shù)組，這里的class需要使用v-bind的數(shù)據(jù)綁定；
:class="['thin', 'italic']">hello
world1！</h1>第二種使用方式，在數(shù)組中使用三元表達式；
:class="['thin', 'italic', flag?'active':'']">hello
world2！</h1>第三種使用方式，在數(shù)組中使用對象來代替三元表達式，來提高代碼的可讀性；
:class="['thin', 'italic', {'active':flag} ]">hello
world3！</h1>在為class使用v-bind綁定對象時候，對象的屬性是一個類名，由于對象的屬性可以帶引號，也可以不帶，屬性的值是一個標識符；
:class="classObj">hello
world！</h1>在css的樣式代碼如下圖：
在js的代碼如下圖：
效果圖如下圖：
三、Vue中樣式style：vue中樣式是動態(tài)綁定style,對象是不需要鍵值對的集合。
第一種使用方式是將鍵值對的對象寫在data中，直接的動態(tài)綁定；
:style="styleObj1">The
first H!!</h1>第二種使用方式是多個鍵值對對象，使用數(shù)組方式，依次寫入；
:style="[ styleObj1, styleObj2 ]">The
first H1!!</h1>在js的代碼如下圖：
效果圖如下圖：
四、v-if和v-show的使用
v-if的特點：每次都會重新刪除或創(chuàng)建元素，有較高的切換性能消耗。
v-show的特點：每次不會重新進行DOM的刪除和創(chuàng)建操作，只是切換了元素的 display:none 樣式，有較高的初始渲染消耗。
v-if和v-show的使用：
如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是使用 v-show，如果元素可能永遠也不會被顯示出來被用戶看到，則使用v-if。
1.在html代碼中，如以下的代碼：
<input type="button" value="toggle" @click="flag=!flag"><h3 v-if="flag">這是用v-if控制的元素h3><h3 v-show="flag">這是用v-show控制的元素h3>
2.在data中定義一個flag，如以下的代碼;
data(){return{flag: false,}}
3.效果圖如下圖：
五、總結(jié)
1.在vue中使用樣式class，有三種方式傳遞一個數(shù)組、數(shù)組中的三元表達式、使用對象來代替三元表達式，在為class使用v-bind綁定對象，對象屬性是一個類名，屬性的值是一個標識符。
2.在vue中使用樣式style，vue中樣式動態(tài)綁定style,對象是不需要鍵值對的集合，有兩種方式將鍵值對的對象寫在data中直接的動態(tài)綁定、多個鍵值對對象，使用數(shù)組方式，依次寫入。
3.vue-show本質(zhì)是標簽display設(shè)置為none，控制隱藏，vue-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素。
4.代碼比較簡單，希望對你有幫助！
看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人
IT共享之家
入群請在微信后臺回復(fù)【入群】
-------------------?End?-------------------
往期精彩文章推薦：