Vue3 style新增的特性有哪些及怎麼用

style新特性

Vue3.2版本對單一檔案元件的style樣式進行了許多升級，如局部樣式、css變數以及樣式暴露給模板使用等。 （學習影片分享：vue影片教學）

一、局部樣式

#當c9ccee2e6ea535a969eb3f532ad9fe89 標籤有scoped attribute 的時候，它的CSS 只會應用到目前元件的元素上：

<template>
  <div class="example">hi</div>
</template>
 
<style scoped>
.example {
  color: red;
}
</style>

二、深度選擇器

處於scoped 樣式中的選擇器如果想要做更「深度」的選擇，也即：影響到子元件，可以使用:deep() 這個偽類：

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

透過v-html 所建立的DOM 內容不會被作用域樣式影響，但你仍然可以使用深度選擇器來設定其樣式。

三、插槽選擇器

預設情況下，作用域樣式不會影響到38b537b6886351ac721d89624ba185ca渲染出來的內容，因為它們被認為是父元件所持有並傳遞進來的。使用:slotted 偽類以確切地將插槽內容作為選擇器的目標：

<style scoped>
:slotted(div) {
  color: red;
}
</style>

四、全域選擇器

如果想讓其中一個樣式規則套用到全域，比起另外建立一個c9ccee2e6ea535a969eb3f532ad9fe89，可以使用:global 偽類來實作：

<style scoped>
:global(.red) {
  color: red;
}
</style>

#五、混合使用局部與全域樣式

你也可以在同一個元件中同時包含作用域樣式與非作用域樣式：

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

#六、支援CSS Modules

a6167d77ee734aaef6dcd2aa69de7b33 標籤會被編譯為CSS Modules 並且將產生的CSS 類別鍵暴露給元件：

1、 預設以$style 物件暴露給元件；

<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>
 
<style module>
.red {
  color: red;
}
</style>

2、可以自訂注入module名稱

<template>
  <p :class="classes.red">red</p>
</template>
 
<style module="classes">
.red {
  color: red;
}
</style>

七、與setup一同使用

########################## ##注入的類別可以透過useCssModule API 在###setup()### 和###5101c0cdbdc49998c642c71f6b6410a8### 中使用：###

<script setup>
import { useCssModule } from &#39;vue&#39;
 
// 默认, 返回 <style module> 中的类
const defaultStyle = useCssModule()
 
// 命名, 返回 <style module="classes"> 中的类
const classesStyle = useCssModule(&#39;classes&#39;)
</script>

#######c、動態CSS## #######單一檔案元件的###c9ccee2e6ea535a969eb3f532ad9fe89### 標籤可以透過###v-bind### 這個CSS 函數將CSS 的值關聯到動態的元件狀態：# ##

<script setup>
const theme = {
  color: &#39;red&#39;
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind(&#39;theme.color&#39;);
}
</style>

以上是Vue3 style新增的特性有哪些及怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！