Stilizarea componentelor în framework-ul Vue

Pentru a stiliza componentele, în fișierul componentei trebuie să scrieți tag-ul style:

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

În acest tag puteți scrie cod CSS, care se va aplica doar la codul HTML al componentei și nu va fi aplicat în altă parte. Acest lucru este special făcut pentru comoditate.

Să ne uităm la un exemplu. Să presupunem că avem câteva paragrafe:

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

Să le colorăm în roșu:

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