Vue Frameworkında Bileşen Stilleme

Bileşenleri stillendirmek için, bileşen dosyasında style etiketini yazmanız gerekir:

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

Bu etiketin içine CSS kodu yazabilirsiniz, ve bu kod sadece bileşenin HTML koduna uygulanacak, başka bir yerde uygulanmayacaktır. Bu, kullanım kolaylığı için özel olarak yapılmıştır.

Bir örnek üzerinden inceleyelim. Diyelim ki bazı paragraflarımız var:

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

Şimdi onları kırmızı renge boyayalım:

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