這篇文章主要介紹“Vue3 style中新增的特性有哪些及怎么用”,在日常操作中,相信很多人在Vue3 style中新增的特性有哪些及怎么用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Vue3 style中新增的特性有哪些及怎么用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),鎮(zhèn)安企業(yè)網(wǎng)站建設(shè),鎮(zhèn)安品牌網(wǎng)站建設(shè),網(wǎng)站定制,鎮(zhèn)安網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,鎮(zhèn)安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
Vue3.2版本對單文件組件的style樣式進行了很多升級,如局部樣式、css變量以及樣式暴露給模板使用等。(學(xué)習(xí)視頻分享:vue視頻教程)
一、局部樣式
當 標簽帶有
scoped
attribute 的時候,它的 CSS 只會應(yīng)用到當前組件的元素上:
hi
二、深度選擇器
處于 scoped
樣式中的選擇器如果想要做更“深度”的選擇,也即:影響到子組件,可以使用 :deep()
這個偽類:
通過
v-html
創(chuàng)建的 DOM 內(nèi)容不會被作用域樣式影響,但你仍然可以使用深度選擇器來設(shè)置其樣式。
三、插槽選擇器
默認情況下,作用域樣式不會影響到
渲染出來的內(nèi)容,因為它們被認為是父組件所持有并傳遞進來的。使用 :slotted
偽類以確切地將插槽內(nèi)容作為選擇器的目標:
四、全局選擇器
如果想讓其中一個樣式規(guī)則應(yīng)用到全局,比起另外創(chuàng)建一個 ,可以使用
:global
偽類來實現(xiàn):
五、混合使用局部與全局樣式
你也可以在同一個組件中同時包含作用域樣式和非作用域樣式:
六、支持CSS Modules
標簽會被編譯為 CSS Modules 并且將生成的 CSS 類鍵暴露給組件:
1、 默認以$style
對象暴露給組件;
This should be red
2、可以自定義注入module名稱
red
七、與setup一同使用
注入的類可以通過 useCssModule API 在 setup()
和 中使用:
八、動態(tài) CSS
單文件組件的 標簽可以通過
v-bind
這一 CSS 函數(shù)將 CSS 的值關(guān)聯(lián)到動態(tài)的組件狀態(tài)上:
hello
到此,關(guān)于“Vue3 style中新增的特性有哪些及怎么用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
網(wǎng)頁題目:Vue3style中新增的特性有哪些及怎么用
文章鏈接:http://weahome.cn/article/jsjpec.html