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