Vueフレームワークにおけるコンポーネントのスタイリング

コンポーネントをスタイリングするには、コンポーネントファイル内に styleタグを記述する必要があります:

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

このタグ内にCSSコードを記述でき、そのスタイルはそのコンポーネントのHTMLコードにのみ適用され、外部には適用されません。 これは利便性のために特別に設計されています。

例を見てみましょう。 いくつかの段落があるとします:

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

それらを赤色に変えてみましょう:

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