Komponenta stilizēšana Vue framwork

Lai stilizētu komponentus, komponenta failā jāpievieno tags style:

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

Šajā tagā var rakstīt CSS kodu, un tas tiks piemērots tikai komponenta HTML kodam, un netiks piemērots ārpus tā. Tas ir izveidots īpaši ērtībai.

Apskatīsim piemēru. Pieņemsim, ka mums ir daži rindkopas:

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

Krāsosim tos sarkanā krāsā:

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