Vue-scoped(局部)樣式使用方法及實(shí)例代碼
scoped(局部)樣式
scoped是在腳手架有一個(gè)編寫樣式的小技巧
作用：讓樣式在局部生效，防止沖突
1 編寫案例
現(xiàn)在有兩個(gè)組件，一個(gè)student,一個(gè)school，現(xiàn)在想給組件寫點(diǎn)樣式
這里只給個(gè)背景色
沒問題，樣式生效
2 樣式?jīng)_突
在組件中寫的樣式，最后會(huì)匯總到一起，哪怕寫了100個(gè)組件，這100的組件的樣式也都是匯總到一起的，這樣可能就會(huì)出現(xiàn)問題，比如類名沖突，下面我就演示一下
注意看，我這里有兩個(gè)組件，組件的樣式都叫test，但是樣式不同，然后我讓這兩個(gè)組件的class相同
發(fā)現(xiàn)出現(xiàn)了樣式?jīng)_突，哪個(gè)組件先被引入，就會(huì)被后者給替換掉，也就是后者代替前者的樣式
傳統(tǒng)解決辦法
如果想避免沖突，傳統(tǒng)的解決辦法是讓樣式名稱不同，但是有點(diǎn)不現(xiàn)實(shí)
vue解決辦法
vue給我們提供了解決辦法，可以使用scoped屬性，表示當(dāng)前這個(gè)樣式只適用于當(dāng)前的組件
3 特別注意：APP組件
scoped雖然好用,但是也不是適用于全部組件的，有一個(gè)人就比較特殊，那就是App
因?yàn)锳pp是全部組件之父，一般在App里面寫的樣式，都是組件可以復(fù)用的，這時(shí)候給App組件聲明scoped就不合適了
所以App組件一般不使用scoped,如果有的樣式是App里面獨(dú)有的，那么是可以使用的
4 總結(jié)
scoped樣式
作用：讓樣式在局部生效，防止沖突
到此這篇關(guān)于Vue-scoped(局部)樣式使用方法及實(shí)例代碼的文章就介紹到這了,更多相關(guān)Vue-scoped(局部)樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue關(guān)閉eslint檢查的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
在VUE項(xiàng)目中經(jīng)常會(huì)用到mapState和mapActions，mapState主要用于同步全局的變量或者對(duì)象，這篇文章主要介紹了VUE中的mapState和mapActions的使用,需要的朋友可以參考下2022-06-06
Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?
前幾天在vue運(yùn)行項(xiàng)目過程中報(bào)錯(cuò)了,所以下面這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?function的解決方法,需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue.js中v-for使用及索引獲取,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了bing Map 在vue項(xiàng)目中的使用,需要的朋友可以參考下2018-04-04
vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)自定義表格工具擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue是當(dāng)前很火的一款MVVM的輕量級(jí)框架，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。因?yàn)樗峁┝撕?jiǎn)潔易于理解的api，使得我們很容易上手。這篇文章給大家介紹了vue雙向數(shù)據(jù)綁定問題，感興趣的朋友一起看看吧2017-10-10
vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)
本文主要介紹了vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03