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>