Styling Komponen dalam Framework Vue

Untuk melakukan styling pada komponen dalam file komponen, perlu ditulis tag style:

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

Dalam tag ini, Anda dapat menulis kode CSS, dan kode tersebut akan diterapkan hanya pada kode HTML komponen tersebut, dan tidak akan diterapkan di luar. Ini sengaja dibuat untuk kenyamanan.

Mari kita lihat contohnya. Misalkan kita memiliki beberapa paragraf:

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

Mari kita warnai paragraf tersebut dengan warna merah:

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