Styling dei componenti nel framework Vue

Per applicare gli stili ai componenti, nel file del componente è necessario scrivere il tag style:

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

In questo tag sarà possibile scrivere codice CSS che verrà applicato solo al codice HTML del componente, e non avrà effetto all'esterno. Questa funzionalità è appositamente progettata per comodità.

Vediamo un esempio. Supponiamo di avere alcuni paragrafi:

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

Coloriamoli di rosso:

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