Stylizacja komponentu we frameworku Vue

Do stylizacji komponentów w pliku komponentu należy napisać znacznik style:

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

W tym znaczniku można pisać kod CSS, który będzie stosowany tylko do kodu HTML komponentu i nie będzie zastosowany gdzieś na zewnątrz. Jest to specjalnie zrobione dla wygody.

Spójrzmy na przykład. Załóżmy, że mamy kilka akapitów:

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

Pokolorujmy je na czerwono:

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