Styling van een component in het Vue-framework

Om componenten te stylen, moet je in het componentbestand de tag style schrijven:

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

In deze tag kun je CSS-code schrijven, die alleen wordt toegepast op de HTML-code van het component, en niet extern zal worden toegepast. Dit is speciaal zo ontworpen voor het gemak.

Laten we een voorbeeld bekijken. Stel we hebben enkele alinea's:

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

Laten we ze rood kleuren:

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