Single-File Component (SFC)

Vue Single-File Component คืออะไร

Vue Single-File Component (SFC) เป็นไฟล์ที่มีนามสกุล .vue ซึ่งรวมการเขียนโค้ดในรูปแบบ HTML, JavaScript และ CSS ไว้ในไฟล์เดียว เพื่อให้การพัฒนา Vue.js components เป็นระบบและจัดการได้ง่ายขึ้น โดยมีโครงสร้างหลักประกอบด้วยสามส่วน คือ <template>, <script> และ <style>.

ตัวอย่างการใช้

<template>
  <div class="greeting">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue Single-File Component!'
    };
  }
};
</script>

<style scoped>
.greeting {
  font-family: Arial, sans-serif;
  text-align: center;
  color: #42b983;
}
</style>

ในตัวอย่างนี้เรามีไฟล์ SFC ที่กำหนดข้อความต้อนรับ และสไตล์เฉพาะในไฟล์เดียวกัน โดยที่ <style scoped> จะทำให้ CSS มีผลเฉพาะกับ component นี้เท่านั้น.