Vue3 스타일의 새로운 기능은 무엇이며 어떻게 사용하나요?

새로운 스타일 기능

Vue3.2 버전에서는 로컬 스타일, CSS 변수, 템플릿에 노출되는 스타일 등 단일 파일 구성 요소의 스타일이 많이 업그레이드되었습니다. (학습 동영상 공유: vue 동영상 튜토리얼)

1. 부분 스타일

<style> 태그에 scoped 속성이 있는 경우 CSS만 해당됩니다. 현재 구성 요소의 요소에 적용: <style> 标签带有 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 内容不会被作用域样式影响，但你仍然可以使用深度选择器来设置其样式。

三、插槽选择器

默认情况下，作用域样式不会影响到 <slot/> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的。使用 :slotted 伪类以确切地将插槽内容作为选择器的目标：

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

四、全局选择器

如果想让其中一个样式规则应用到全局，比起另外创建一个 <style>，可以使用 :global 伪类来实现：

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

五、混合使用局部与全局样式

你也可以在同一个组件中同时包含作用域样式和非作用域样式：

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

六、支持CSS Modules

<style module> 标签会被编译为 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() 和 <script setup> 中使用：

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

八、动态 CSS

单文件组件的 <style> 标签可以通过 v-bind

<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>

🎜 2. 깊이 선택기 🎜🎜🎜 scoped 스타일의 선택기가 더 "깊은" 선택을 원하는 경우, 즉 영향력에 도달하려면 하위 구성 요소인 경우 :deep() 의사 클래스를 사용할 수 있습니다. 🎜rrreee

🎜 v-html을 통해 생성된 DOM 콘텐츠는 범위 스타일의 영향을 받지 않습니다. 하지만 깊이 선택기를 사용하여 스타일을 지정할 수 있습니다. 🎜

🎜🎜3. 슬롯 선택기 🎜🎜🎜기본적으로 범위 스타일은 <slot/>에 의해 렌더링된 콘텐츠에 영향을 미치지 않습니다. 상위 구성 요소. :slotted 의사 클래스를 사용하여 슬롯 콘텐츠를 선택기로 정확하게 타겟팅합니다. 🎜rrreee🎜🎜 4. 전역 선택기 🎜🎜🎜 스타일 규칙 중 하나를 전역적으로 적용하려면 다음을 수행하세요. , :global 의사 클래스를 사용하여 구현할 수 있는 <style>를 만듭니다. 🎜rrreee🎜🎜5 로컬 스타일과 전역 스타일을 혼합할 수 있습니다🎜🎜🎜 또한 동일한 구성 요소에는 범위가 지정된 스타일과 범위가 지정되지 않은 스타일이 모두 포함됩니다. 🎜rrreee🎜🎜6. CSS 모듈 지원🎜🎜🎜<style module> 태그는 CSS 모듈로 컴파일되고 CSS 클래스 키가 생성됩니다. 구성 요소에 노출됩니다. 🎜🎜1. 기본적으로 $style 개체로 구성 요소에 노출됩니다. 🎜rrreee🎜2. 주입할 모듈 이름을 맞춤 설정할 수 있습니다. setup🎜🎜 🎜삽입된 클래스는 useCssModule API: 🎜rrreee🎜🎜8을 통해 setup() 및 <script setup>에서 사용할 수 있습니다. 🎜단일 파일 구성 요소 <style> 태그는 CSS 함수 v-bind를 통해 CSS 값을 동적 구성 요소 상태에 연결할 수 있습니다. 🎜rrreee

위 내용은 Vue3 스타일의 새로운 기능은 무엇이며 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!