Quelles sont les différences entre l'utilisation du module CSS et du module CSS dans Vue ?

Cette fois, je vais vous expliquer quelles sont les différences entre l'utilisation du CSS scoped et du module CSS dans Vue, et quelles sont les précautions pour l'utilisation du CSS scoped et du module CSS dans Vue. Voici le combat réel. Regardons le cas.

scoped CSS

Document officiel

scoped CSS peut être utilisé directement dans un projet Vue en cours d'exécution.

Utilisation :

<style scoped>
h1 {
 color: #f00;
}
</style>

Le résultat de l'utilisation de scoped pour diviser les styles locaux est le suivant :

h1[data-v-4c3b6c1c] {
 color: #f00;
}

C'est-à-dire qu'un attribut unique est ajouté à l'élément pour le distinguer.

Inconvénients

1. Si l'utilisateur définit le même nom de classe ailleurs, cela peut toujours affecter le style du composant.

2. Selon les caractéristiques du style CSS priorité , le traitement scoped augmentera le poids de chaque style :

En théorie, nous devons modifier ce style nécessite plus poids pour couvrir ce style.

Donc, lorsque fait référence à un plug-in tiers contenant du scoped, si vous devez modifier le style, vous devez le modifier globalement et faire attention au problème de poids 0,0. n'a pas d'autre choix que d'utiliser !important.

3. Si le composant contient d'autres composants, seul l'attribut data du composant actuel sera ajouté à la balise la plus externe des autres composants :

Donc, généralement, si le composant parent est étendu, il Les balises internes, à l'exception de la balise la plus externe, auront un poids inférieur à celui des balises internes des sous-composants qui ont défini leurs propres styles et n'affecteront pas leurs styles.

Cependant, il peut également être affecté par les méthodes suivantes :

Quatrièmement, scoped modifiera le rendu du sélecteur de balise Plusieurs fois plus lent

Le responsable a donné quelques précautions comme suit :

Nous pouvons voir que scoped réduira sérieusement les performances lors de l'utilisation du tag L’utilisation de class ou d’id ne le fera pas.

module CSS

Document officiel

le module CSS doit ajouter la configuration du chargeur CSS pour prendre effet, veuillez consulter le documentation pour les détails accomplis.

Remarque

Si vous utilisez style-loader, si vous souhaitez que la configuration prenne effet, vous devez passer à vue-style - comme décrit dans le document chargeur.

La différence entre les deux peut être trouvée ici vue-style-loader

est utilisé comme suit :

<template>
 <p :class="$style.gray">
 Im gray
 </p>
</template>
<style module>
.gray {
 color: gray;
}
</style>

Le résultat de l'utilisation du module est compilé comme suit :

<p class="gray_3FI3s6uz">Im gray</p>
.gray_3FI3s6uz {
 color: gray;
}

On peut voir que le module CSS remplace directement le nom de la classe, éliminant la possibilité pour l'utilisateur de définir le nom de la classe pour affecter le style du composant.

De cette façon, $style.red peut être utilisé comme variable et peut être utilisé dans js, comme suit :

<script>
export default {
 created () {
 console.log(this.$style.gray)
 // -> "gray_3FI3s6uz"
 // 一个基于文件名和类名生成的标识符
 }
}
</script>

Nous pouvons voir que le module a plus de liaison et $style , si vous voulez être plus élégant, vous pouvez jeter un œil à vue-css-modules.

Problèmes d'utilisation du module CSS dans les images clés

Utilisation de modules CSS pour gérer les images clés de l'animationanimation, le nom de l'animation doit être écrit en premier.

animation: ani 1s; peut compiler normalement, mais animation: 1s ani; ne sera pas compilé comme prévu, il est donc également important de développer un bon ordre d'écriture des paramètres CSS.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment créer un environnement de développement webpack+react

Explication détaillée de l'utilisation de Node.js Buffer

Comment créer un environnement de bucket familial React

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!