Komponendi stiilimine Vue raamistikus

Komponentide stiilimiseks tuleb komponendi failis kirjutada silt style:

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

Selles sildis saab kirjutada CSS koodi, mis rakendub ainult komponendi HTML koodile ega rakendu kuskile mujale. See on tehtud spetsiaalselt mugavuse huvides.

Vaatame näidet. Oletame, et meil on mõned lõigud:

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

Värvime need punaseks:

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