Стилизация на компонент във фреймуърка 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>