Estilização de componentes no framework Vue

Para estilizar componentes, no arquivo do componente, você precisa escrever a tag style:

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

Nesta tag, você pode escrever código CSS, e ele será aplicado apenas ao código HTML do componente, e não será aplicado em nenhum outro lugar. Isso é feito especificamente para conveniência.

Vamos ver um exemplo. Suponha que temos alguns parágrafos:

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

Vamos colori-los em vermelho:

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