კომპონენტის სტილიზაცია 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>