Styling einer Komponente im Vue-Framework

Um Komponenten zu stylen, muss im Komponentenfile das Tag style geschrieben werden:

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

In diesem Tag kann CSS-Code geschrieben werden, wobei dieser nur auf den HTML-Code der Komponente angewendet wird und nicht nach außen wirkt. Dies ist speziell für den Komfort so implementiert.

Sehen wir uns ein Beispiel an. Nehmen wir an, wir haben einige Absätze:

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

Lassen Sie uns diese rot einfärben:

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