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)文章
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。通過本文給大家分享vuex 漸進式教程實例代碼，從入門級帶你慢慢深入使用vuex，感興趣的朋友一起看看吧2018-11-11
vue 動態(tài)添加class,三個以上的條件做判斷方式
這篇文章主要介紹了vue 動態(tài)添加class,三個以上的條件做判斷方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue axios同步請求解決方案,需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了vue3.0實現(xiàn)移動端電子簽名組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Element樹形控件整合帶圖標(biāo)的下拉菜單(tree+dropdown+input)
Element UI 官網(wǎng)提供的樹形控件包含基礎(chǔ)的、可選擇的、自定義節(jié)點內(nèi)容的、帶節(jié)點過濾的以及可拖拽節(jié)點的樹形結(jié)構(gòu)，本文實現(xiàn)了樹形控件整合帶圖標(biāo)的下拉菜單，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了Vue3中的常見組件通信之v-model使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了vue-cli 項目打包完成后運行文件路徑報錯問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
今天小編就為大家分享一篇解決vue路由后界面沒有變化,但是鏈接有的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue?ElementUI?table實現(xiàn)雙擊修改編輯某個內(nèi)容的方法
在實現(xiàn)表格單元格雙擊編輯功能時,需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認(rèn)編輯,同時,需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09
van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開發(fā)想省時間就是要找框架呀,下面這篇文章主要給大家介紹了關(guān)于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06