Vue3 스타일의 새로운 기능에 대해 이야기해보겠습니다(요약)

Vue3가 스타일을 업그레이드했습니다. 이 글은 Vue3 스타일의 새로운 기능을 요약하고 공유하겠습니다. 모두에게 도움이 되기를 바랍니다.

Vue3.0 이후에 도입된 설정 기능은 JS 작성과 마찬가지로 Vue 구성 요소를 개발합니다. 또한 스타일에는 변수 및 함수 도입과 같은 많은 새로운 기능이 추가되어 CSS를 더 쉽게 사용할 수 있습니다...

새로운 스타일 기능

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

1. 부분 스타일

c9ccee2e6ea535a969eb3f532ad9fe89 태그에 scoped 속성이 있는 경우 시간이 지나면 CSS는 현재 구성 요소의 요소에만 적용됩니다: 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>

八、动态 CSS

单文件组件的 c9ccee2e6ea535a969eb3f532ad9fe89 标签可以通过 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. 슬롯 선택 🎜 🎜🎜🎜기본적으로 범위 스타일은 38b537b6886351ac721d89624ba185ca에 의해 렌더링된 콘텐츠에 영향을 미치지 않습니다. 왜냐하면 해당 스타일은 상위 구성 요소에 의해 유지되고 전달되는 것으로 간주되기 때문입니다. :slotted 의사 클래스를 사용하여 슬롯 콘텐츠를 선택기와 정확히 동일하게 타겟팅합니다. 🎜rrreee🎜🎜🎜🎜 4. 전역 선택기 🎜🎜🎜🎜 스타일 규칙 중 하나를 전역적으로 적용하려면 다른 규칙을 만드는 것보다 1e70a9a8b42db15f7ef1429243a57a40 태그는 CSS Modules🎜 생성된 CSS 클래스 키를 구성 요소에 노출 : 🎜 🎜1. 기본적으로 $style 개체가 구성 요소에 노출됩니다. 🎜rrreee🎜2 삽입된 모듈 이름을 맞춤 설정할 수 있습니다🎜rrreee🎜🎜🎜🎜7. setup🎜🎜🎜🎜주입된 클래스를 전달할 수 있음 setup() 및 60bec4b3d081225df021f471e28acca4 사용 대상: 🎜rrreee🎜🎜 🎜🎜8. 동적 CSS🎜 🎜🎜🎜단일 파일 구성 요소의 c9ccee2e6ea535a969eb3f532ad9fe89 태그는 v-bind를 통해 CSS 값을 동적 구성 요소 상태에 연결할 수 있습니다. > CSS 기능: 🎜rrreee🎜 (끝) 🎜

(학습 영상 공유: 웹 프론트엔드 개발, 기본 프로그래밍 영상)

위 내용은 Vue3 스타일의 새로운 기능에 대해 이야기해보겠습니다(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!