0Pricing
Frontend Academy · บทเรียน

Vue SFC: script, template และ style

ทำความเข้าใจรูปแบบ Single-File Component: บล็อก script สำหรับตรรกะ บล็อก template สำหรับมุมมอง และบล็อก style สำหรับ CSS ที่จำกัดขอบเขต

Vue SFC: script, template และ style เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คอมโพเนนต์แบบไฟล์เดียวคืออะไร

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

<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>

<template>
  <h1>{{ greeting }}</h1>
</template>

<style scoped>
h1 { color: #42b883; }
</style>

บล็อกสคริปต์

ใส่ตรรกะ ข้อมูล การนำเข้า และโค้ด Composition API ไว้ที่นี่ เมื่อใช้ <script setup> ตัวแปรและการนำเข้าที่ประกาศในระดับบนสุดจะพร้อมใช้งานในแม่แบบโดยอัตโนมัติ

script setup — แนวทางสมัยใหม่

<script setup> เป็นไวยากรณ์ SFC ที่แนะนำ ตัวแปร พร็อพเพอร์ตีคำนวณ และฟังก์ชันที่ประกาศไว้ในนั้นจะพร้อมใช้งานโดยตรงในแม่แบบ โดยไม่ต้องคืนค่าอย่างชัดเจน

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
function increment() { count.value++; }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

บล็อกแม่แบบ

แม่แบบประกอบด้วยมุมมอง HTML ของคอมโพเนนต์ แม่แบบของ Vue จะถูกคอมไพล์เป็นฟังก์ชันเรนเดอร์ ใช้แอตทริบิวต์และคำสั่งเฉพาะของ Vue (v-if, v-for, @click) ภายในแม่แบบ

การแทรกค่าในแม่แบบ

ใช้วงเล็บปีกกาคู่ {{ }} เพื่อแสดงข้อมูลที่ตอบสนองต่อการเปลี่ยนแปลงเป็นข้อความ Vue จะหลีกเลี่ยงการตีความ HTML โดยอัตโนมัติ หากต้องการเรนเดอร์ HTML ให้ใช้คำสั่ง v-html (ด้วยความระมัดระวัง)

<template>
  <p>{{ message }}</p>
  <p>{{ count * 2 }}</p>
  <p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>

บล็อกสไตล์

CSS ในบล็อกสไตล์จะมีผลกับคอมโพเนนต์ เพิ่ม scoped เพื่อจำกัดขอบเขตสไตล์ให้ใช้กับองค์ประกอบของคอมโพเนนต์นี้เท่านั้น และป้องกันไม่ให้สไตล์รั่วไหลไปใช้ทั่วทั้งแอปโดยไม่ตั้งใจ

<style scoped>
.card {
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>

สไตล์แบบจำกัดขอบเขตทำงานอย่างไร

Vue จะเพิ่มแอตทริบิวต์ข้อมูลที่ไม่ซ้ำกัน (เช่น data-v-abc123) ให้กับองค์ประกอบของคอมโพเนนต์ และเขียนตัวเลือก CSS แบบจำกัดขอบเขตใหม่ให้รวมแอตทริบิวต์นี้ไว้ด้วย วิธีนี้ทำให้มั่นใจว่าสไตล์จะจับคู่กับองค์ประกอบในคอมโพเนนต์นี้เท่านั้น

CSS Modules ใน Vue

ทางเลือกนอกเหนือจาก scoped คือใช้ <style module> สำหรับ CSS Modules เข้าถึงชื่อคลาสผ่านอ็อบเจ็กต์ $style ในแม่แบบ

<template>
  <div :class="$style.card">Content</div>
</template>

<style module>
.card { background: white; }
</style>

สไตล์ส่วนกลาง

สไตล์ที่ไม่มี scoped จะมีผลทั่วทั้งแอป รูปแบบหนึ่งที่ใช้กันทั่วไปคือใช้ app.css ส่วนกลางสำหรับสไตล์พื้นฐานและโทเค็นการออกแบบ ร่วมกับสไตล์แบบจำกัดขอบเขตของแต่ละคอมโพเนนต์สำหรับกฎเฉพาะคอมโพเนนต์

TypeScript ใน SFC

เพิ่ม lang="ts" ในบล็อกสคริปต์เพื่อใช้ TypeScript โดย Volar (ส่วนขยาย IDE ของ Vue อย่างเป็นทางการ) มอบการรองรับ TypeScript อย่างเต็มรูปแบบสำหรับ Vue SFC รวมถึงแม่แบบที่ตรวจสอบชนิดได้

การตั้งชื่อไฟล์ SFC

ตั้งชื่อไฟล์ SFC ด้วยรูปแบบ PascalCase (UserProfile.vue) สำหรับคอมโพเนนต์ที่ใช้ในแม่แบบ Vue แนะนำให้ใช้ชื่อหลายคำเพื่อหลีกเลี่ยงความขัดแย้งกับองค์ประกอบ HTML

ตรวจสอบความเข้าใจ

แอตทริบิวต์ scoped ในบล็อก <style> ของ Vue ทำหน้าที่อะไร

สรุป: SFC ของ Vue

ไฟล์ .vue มีสามบล็อก ได้แก่ script (ตรรกะ), template (มุมมอง) และ style (CSS) ใช้