【vue3】样式穿透、完整新特性、动态css、css-module

在Vue 3中，有几个与CSS相关的新特性：

1. 样式穿透（Scoped CSS）: 在Vue单文件组件（SFC）中，默认情况下，所有的CSS选择器都会自动使用scoped属性，这样它们只会影响当前组件的元素。

<style scoped>
.example {
  color: red;
}
</style>

2. 完整新特性（Composition API）: Vue 3引入了Composition API，它允许开发者用函数的方式来组合组件的逻辑，而不是之前的选项式API。
3. 动态CSS（Dynamic CSS via v-bind）: 可以使用v-bind来动态地绑定CSS类或样式。

<template>
  <div :class="{ active: isActive }"></div>
</template>
 
<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>

4. CSS Modules: Vue 3支持CSS Modules，它可以让你在CSS文件中创建独立的作用域，避免类名冲突。

<template>
  <div :class="style.active"></div>
</template>
 
<script>
import style from './style.module.css'
 
export default {
  setup() {
    return { style }
  }
}
</script>

在style.module.css文件中：

.active {
  color: green;
}

以上是Vue 3中与CSS相关的一些新特性和用法。