โครงสร้างของแม่แบบ script style
ทำความเข้าใจโครงสร้างสามส่วนของไฟล์คอมโพเนนต์ Svelte
โครงสร้างของแม่แบบ script style เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
สามส่วน
ไฟล์คอมโพเนนต์ Svelte มีบล็อกระดับบนสุดที่ไม่จำเป็นต้องมีสามบล็อก ได้แก่ <script> มาร์กอัป และ <style>
บล็อกสคริปต์
บล็อกสคริปต์ใช้เก็บตรรกะของคอมโพเนนต์ใน JavaScript หรือ TypeScript ปกติ
<script>
let name = "Ada";
</script>มาร์กอัป
ทุกอย่างที่อยู่นอกแท็กสคริปต์และสไตล์คือมาร์กอัปของคอมโพเนนต์ ซึ่งเป็น HTML ที่เพิ่มความสามารถด้วยไวยากรณ์แม่แบบของ Svelte
<h1>Hello {name}!</h1>บล็อกสไตล์
สไตล์จะมีขอบเขตเฉพาะภายในคอมโพเนนต์นี้เท่านั้น คอมโพเนนต์อื่นยังคงมีรูปลักษณ์ของตนเอง
<style>
h1 { color: rebeccapurple; }
</style>คอมโพเนนต์ที่สมบูรณ์
รวมทั้งสามส่วนไว้ในไฟล์ .svelte เดียว
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>ธรรมเนียมการจัดลำดับ
ตามธรรมเนียมจะวางสคริปต์ไว้ก่อน มาร์กอัปไว้ลำดับที่สอง และสไตล์ไว้ท้ายสุด แต่ Svelte ไม่ได้บังคับลำดับนี้
รูปแบบ TypeScript
เพิ่ม lang="ts" ให้แท็กสคริปต์เพื่อใช้ TypeScript ภายในแท็กนั้น
<script lang="ts">
let name: string = "Ada";
</script>บริบทสคริปต์โมดูล
ใช้ <script context="module"> สำหรับโค้ดที่ทำงานหนึ่งครั้งต่อโมดูล ไม่ใช่หนึ่งครั้งต่ออินสแตนซ์
<script context="module">
export const VERSION = "1.0";
</script>ไม่มีหลายบล็อก
ในแต่ละไฟล์ คุณมีสคริปต์อินสแตนซ์ได้ไม่เกินหนึ่งบล็อก และสคริปต์โมดูลได้ไม่เกินหนึ่งบล็อก
แท็กสไตล์ไม่จำเป็นต้องมี
หากคอมโพเนนต์ไม่มีสไตล์ ให้ละบล็อกสไตล์ออกทั้งหมด
แท็กสคริปต์ไม่จำเป็นต้องมี
คอมโพเนนต์ที่มีแต่มาร์กอัปแบบคงที่สามารถละบล็อกสคริปต์ได้เช่นกัน ไฟล์ .svelte ที่มีแต่มาร์กอัปถือว่าใช้ได้
ตรวจสอบความเข้าใจ
คุณใส่ CSS ที่มีขอบเขตไว้ที่ใด
ทบทวน
ไฟล์ Svelte มีได้สูงสุดสามบล็อก ได้แก่ script สำหรับตรรกะ มาร์กอัป และ style สำหรับ CSS ที่มีขอบเขต
คำถามที่พบบ่อย
บทเรียน “โครงสร้างของแม่แบบ script style” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “โครงสร้างของแม่แบบ script style” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “โครงสร้างของแม่แบบ script style”
ทำความเข้าใจโครงสร้างสามส่วนของไฟล์คอมโพเนนต์ Svelte คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “โครงสร้างของแม่แบบ script style” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- โครงสร้างของแม่แบบ script style
- ตัวแปรตอบสนองด้วย let
- การแทรกค่า: {expression}
- ค่าที่คำนวณ: การประกาศตอบสนอง $: