Vue Freymvorkunda Komponentin Stillesdirilmesi

Komponentleri stillesdirmek ucun faylinda komponentin yazilması lazim olan teq style:

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

Bu teqde CSS kodu yaza bilərsiniz, bu zaman o yalnız komponentin HTML koduna tetbiq olunacaq və xaricdə heç yerde tetbiq olunmayacaq. Bu xususi olaraq rahatlıq ucun edilib.

Gəlin misal uzerinde baxaq. Fərz edək ki, bizim bəzi abzaslarımız var:

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

Gəlin onları qırmızı rəngə boyayaq:

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