Styliser les composants Vue.js à l'aide de CSS

Apprenez toutes les options à votre disposition pour styliser les composants Vue.js en utilisant CSS

Remarque: ce tutoriel utilise les composants de fichier unique Vue.js

L'option la plus simple pour ajouter du CSS à un composant Vue.js est d'utiliser lestylebalise, tout comme en HTML:

<template>
  <p style="text-decoration: underline">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’ } } } </script>

C'est autant de statique que possible. Et si tu veuxunderlineà définir dans les données des composants? Voici comment vous pouvez le faire:

<template>
  <p :style="{'text-decoration': decoration}">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’ } } } </script>

:styleest un raccourci pourv-bind:style. J'utiliserai ce raccourci tout au long de ce didacticiel.

Remarquez comment nous avons dû enveloppertext-decorationentre guillemets. Cela est dû au tiret, qui ne fait pas partie d'un identifiant JavaScript valide.

Vous pouvez éviter la citation en utilisant une syntaxe spéciale camelCase activée par Vue.js et en la réécrivant danstextDecoration:

<template>
  <p :style="{textDecoration: decoration}">Hi!</p>
</template>

Au lieu de lier un objet àstyle, vous pouvez référencer une propriété calculée:

<template>
  <p :style="styling">Hi!</p>
</template>

<script> export default { data() { return { textDecoration: ‘underline’, textWeight: ‘bold’ } }, computed: { styling: function() { return { textDecoration: this.textDecoration, textWeight: this.textWeight } } } } </script>

Les composants Vue génèrent du HTML brut, vous pouvez donc choisir d'ajouter une classe à chaque élément et ajouter un sélecteur CSS correspondant avec des propriétés qui le stylisent:

<template>
  <p class="underline">Hi!</p>
</template>

<style> .underline { text-decoration: underline; } </style>

Vous pouvez utiliser SCSS comme ceci:

<template>
  <p class="underline">Hi!</p>
</template>

<style lang=“scss”> body { .underline { text-decoration: underline; } } </style>

Vous pouvez coder en dur la classe comme dans l'exemple ci-dessus, ou vous pouvez lier la classe à une propriété de composant, pour la rendre dynamique, et ne l'appliquer à cette classe que si la propriété data est vraie:

<template>
  <p :class="{underline: isUnderlined}">Hi!</p>
</template>

<script> export default { data() { return { isUnderlined: true } } } </script>

<style> .underline { text-decoration: underline; } </style>

Au lieu de lier un objet à une classe, comme nous l'avons fait avec<p :class="{text: isText}">Hi!</p>, vous pouvez directement lier une chaîne, et cela référencera une propriété de données:

<template>
  <p :class="paragraphClass">Hi!</p>
</template>

<script> export default { data() { return { paragraphClass: ‘underline’ } } } </script>

<style> .underline { text-decoration: underline; } </style>

Vous pouvez attribuer plusieurs classes en ajoutant deux classes àparagraphClassdans ce cas ou en utilisant un tableau:

<template>
  <p :class="[decoration, weight]">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’, weight: ‘weight’, } } } </script>

<style> .underline { text-decoration: underline; } .weight { font-weight: bold; } </style>

La même chose peut être faite en utilisant un objet incorporé dans la liaison de classe:

<template>
  <p :class="{underline: isUnderlined, weight: isBold}">Hi!</p>
</template>

<script> export default { data() { return { isUnderlined: true, isBold: true } } } </script>

<style> .underline { text-decoration: underline; } .weight { font-weight: bold; } </style>

Et vous pouvez combiner les deux déclarations:

<template>
  <p :class="[decoration, {weight: isBold}]">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’, isBold: true } } } </script>

<style> .underline { text-decoration: underline; } .weight { font-weight: bold; } </style>

Vous pouvez également utiliser une propriété calculée qui renvoie un objet, ce qui fonctionne mieux lorsque vous avez de nombreuses classes CSS à ajouter au même élément:

<template>
  <p :class="paragraphClasses">Hi!</p>
</template>

<script> export default { data() { return { isUnderlined: true, isBold: true } }, computed: { paragraphClasses: function() { return { underlined: this.isUnderlined, bold: this.isBold } } } } </script>

<style> .underlined { text-decoration: underline; } .bold { font-weight: bold; } </style>

Notez que dans la propriété calculée, vous devez référencer les données du composant en utilisantthis.[propertyName], tandis que dans le modèle, les propriétés des données sont placées comme des propriétés de premier niveau.

Tout CSS qui n'est pas codé en dur comme dans le premier exemple sera traité par Vue, et Vue fait le bon travail de préfixer automatiquement le CSS pour nous, afin que nous puissions écrire du CSS propre tout en ciblant les navigateurs plus anciens (ce qui signifie toujours les navigateurs que Vue prend en charge, donc IE9 +)

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: