Stylisation d'un composant dans le framework Vue

Pour styliser les composants dans le fichier composant, il faut écrire la balise style :

App.vue<script>
  
</script>
<template>
  
</template>
<style>
  
</style>

Dans cette balise, vous pourrez écrire du code CSS qui s'appliquera uniquement au code HTML du composant, et ne sera pas appliqué à l'extérieur. Ceci est spécialement conçu pour plus de commodité.

Regardons un exemple. Supposons que nous ayons quelques paragraphes :

App.vue<template>
  <p>
    1
  </p>
  <p>
    2
  </p>
</template>

Colorons-les en rouge :

App.vue<style>
  p {
    color: red;
  }
</style>