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>