vue3單文件組件中style特性的深入講解
更新時間：2021年09月06日 09:09:25 作者：_六耳_
單文件就是把一個頁面拆分為多個,多層次的組件,通過多層引用,大大縮小vue文件的長度和頁面復(fù)雜度,下面這篇文章主要給大家介紹了關(guān)于vue3單文件組件中style特性的相關(guān)資料,需要的朋友可以參考下
style scoped
需要注意的有：
- 樣式不會影響到其他組件，只會在當(dāng)前組件生效。
- 子組件的根元素會同時 受父組件的作用域樣式，和子組件的作用域樣式影響. 這樣做的目的是讓父組件可以調(diào)整子組件的布局。
- 存在3個特殊的選擇器：
1. 深度選擇器：可以影響到子組件. 使用偽類 => :deep(cls: 影響的選擇器)
.a :deep(.b) {
...
}
2. 插槽選擇器: 可以影響到插槽內(nèi)容的樣式。使用偽類 => :slotted(選擇器)
:slloted(.a) {
...
}
3. 全局選擇器: 是樣式影響到全局。 使用偽類 => :global(選擇器)
:slloted(.a) {
...
}
scoped style 可以和 style同時存在
style module
style 標簽中帶有 module。其樣式和 style scoped一樣只能作用域于當(dāng)前組件。
此方式會將css 編譯為 css modules.且暴露給組件$styles對象來使用css樣式
<template>
<p :class="$style.red">
This should be red
</p>
</template>
<style module>
.red {
color: red;
}
</style>
可以給module賦值來自定義暴露的對象名稱
<template>
<p :class="style.red">
This should be red
</p>
</template>
<style module='style'>
.red {
color: red;
}
</style>
在組合式api中可以使用 useCssModule() api來使用cssModule.
// 默認, 返回 <style module> 中的類
useCssModule()
// 命名, 返回 <style module="classes"> 中的類
useCssModule('classes')
狀態(tài)驅(qū)動的動態(tài)css
可以使用 v-bind() 來將css值關(guān)聯(lián)到動態(tài)的組件狀態(tài)上
<template>
<div class="text">hello</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>
<style>
.text {
color: v-bind(color);
}
</style>
總結(jié)
到此這篇關(guān)于vue3單文件組件中style特性的文章就介紹到這了,更多相關(guān)vue3單文件組件style特性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在Vue3中使?echarts?圖表寬度自適應(yīng)變化的操作方法
本文介紹了在Vue3中使用ECharts時,如何使圖表容器寬度自適應(yīng)頁面大小,通過修改模板中的div樣式,將寬度設(shè)置為100%,并監(jiān)聽窗口大小變化事件,調(diào)用ECharts實例的resize方法,實現(xiàn)圖表的自適應(yīng)調(diào)整,感興趣的朋友跟隨小編一起看看吧2025-02-02
這篇文章主要介紹了記錄一個van-list不斷onLoad加載的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別
本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
生命周期分為四個對子，根據(jù)不同的情況使用不同的函數(shù)，這篇文章主要為大家介紹了這些函數(shù)的使用與區(qū)別，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了vant中的toast輕提示實現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
下面小編就為大家分享一篇對vue里函數(shù)的調(diào)用順序介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
下面小編就為大家分享一篇Vue.js自定義事件的表單輸入組件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue.js中如何導(dǎo)出Excel表格,在項目中經(jīng)常會遇到這樣的需求，今天小編分步驟通過實例代碼給大家詳細介紹，需要的朋友可以參考下2019-06-06
隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)右側(cè)滑出層動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04