Vue freymvorkida komponentni stilizatsiya qilish

Komponentlarni stilizatsiya qilish uchun komponent faylida style tegi yozilishi kerak:

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

Ushbu tegda CSS kod yozish mumkin, bunda u faqat komponentning HTML kodiga qo'llaniladi va boshqa joyda qo'llanilmaydi. Bu qulaylik uchun maxsus qilingan.

Keling, misol orqali ko'rib chiqaylik. Faraz qilaylik, bizda bir nechta abzatslar bor:

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

Keling, ularni qizil rangga bo'yaymiz:

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