Parlons des nouvelles fonctionnalités du style Vue3 (résumé)

Vue3 a amélioré le style. Cet article résumera et partagera avec vous les nouvelles fonctionnalités du style Vue3. J'espère qu'il sera utile à tout le monde !

La fonction de configuration introduite après Vue3.0 développe des composants Vue tout comme l'écriture de JS. De plus, le style ajoute également de nombreuses nouvelles fonctionnalités, telles que l'introduction de variables et de fonctions, rendant le CSS plus réutilisable...

Nouvelles fonctionnalités de style

La version Vue3.2 a apporté de nombreuses mises à niveau au style des composants à fichier unique, tels que les styles locaux, les variables CSS et les styles exposés aux modèles. (Partage vidéo d'apprentissage : tutoriel vidéo Vue)

1. Style partiel

Lorsque la balise c9ccee2e6ea535a969eb3f532ad9fe89 a l'attribut scoped temps, son CSS ne sera appliqué qu'aux éléments du composant courant : 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. Sélecteur de profondeur 🎜🎜🎜🎜 Si vous souhaitez faire une sélection plus "profonde", c'est-à-dire affecter les sous-composants, vous pouvez utiliser le sélecteur dans le scoped style. Utilisez la pseudo-classe :deep() : 🎜rrreee

🎜Le contenu DOM créé via v-html ne sera pas affecté par les styles de portée, mais vous pouvez le faire. utilisez toujours le sélecteur de profondeur pour le styliser. 🎜

🎜🎜🎜🎜3. par défaut, les styles de portée n'affecteront pas le contenu rendu par 38b537b6886351ac721d89624ba185ca car ils sont considérés comme étant détenus et transmis par le composant parent. Utilisez la pseudo-classe :slotted pour cibler le contenu du slot exactement comme le sélecteur : 🎜rrreee🎜🎜🎜🎜 4. Sélecteur global 🎜🎜🎜🎜Si vous souhaitez qu'une des règles de style soit appliquée globalement, c'est mieux que d'en créer une autre 963b51fd99b1a420d1744abc7c9c9e20 sera compilée dans Modules CSS🎜 et exposez la clé de classe CSS générée au composant : 🎜 🎜1. Par défaut, l'objet $style est exposé au composant 🎜rrreee🎜2 Vous pouvez personnaliser le nom du module injecté🎜rrreee🎜🎜🎜🎜7 Utilisé avec setup🎜🎜🎜🎜La classe injectée peut être transmise useCssModule🎜 API dans setup() et 5101c0cdbdc49998c642c71f6b6410a8 Utilisé dans : 🎜rrreee🎜🎜🎜 🎜8. CSS dynamique🎜 🎜🎜🎜La balise c9ccee2e6ea535a969eb3f532ad9fe89 d'un composant mono-fichier peut associer la valeur CSS à l'état du composant dynamique via le v-bind. Fonction CSS : 🎜rrreee🎜 (Fin) 🎜

(Partage de vidéos d'apprentissage : Développement web front-end, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!