Стилизация компонента в фреймворке Vue

Для стилизации компонентов в файле компонента нужно написать тег style:

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

В этом теге можно будет писать CSS код, при этом он будет применяться только к HTML коду компонента, и не будет применен где-то вовне. Это сделано специально для удобства.

Давайте посмотрим на примере. Пусть у нас есть некоторые абзацы:

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

Давайте покрасим их в красный цвет:

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