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