Overview

Single File Components (SFCs) เป็นไฟล์ .vue ที่ประกอบด้วยสามส่วนหลัก:

Single File Components

รูปแบบการเขียน Vue Component ในไฟล์ .vue เดียวที่รวม template, script และ style

Feature	Description	Category
<template>	กำหนด markup ของ component	Template
<script>	กำหนด logic ของ component	Script
<script setup>	Composition API syntax	Script
<style>	กำหนด styles สำหรับ component	Style
scoped	จำกัด scope ของ styles	Style
module	CSS Modules	Style
v-bind()	ใช้ค่าจาก script ใน CSS	Style

script setup

Syntax พิเศษสำหรับการใช้ Composition API ใน SFC

Feature	คำอธิบาย	ลิงค์เอกสาร
defineProps()	ประกาศ props ของ component	defineProps
defineEmits()	ประกาศ custom events	defineEmits
defineModel()	สองทาง binding สำหรับ props	defineModel
defineExpose()	เปิดเผย properties ให้ parent component	defineExpose
defineOptions()	ประกาศ component options	defineOptions
defineSlots()	ประกาศ slot types	defineSlots
useSlots()	ใช้งาน slots ใน script	useSlots
useAttrs()	ใช้งาน attributes ใน script	useAttrs
<script setup>	Composition API syntax sugar	script setup docs
Top-level await	ใช้ async/await ได้โดยตรง	Top-level await

CSS Features

คุณสมบัติพิเศษของ CSS ใน SFC เช่น scoped styles และ CSS Modules

Feature	คำอธิบาย	ลิงค์เอกสาร
<style scoped>	Scoped CSS	Scoped CSS
<style module>	CSS Modules syntax	CSS Modules
v-bind() in CSS	ใช้ reactive values ใน CSS	v-bind in CSS