การแทรกค่าและคำสั่ง
ใช้การแทรกค่าด้วยวงเล็บปีกกาและคำสั่งหลักในเทมเพลต
การแทรกค่าและคำสั่ง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
ภาพรวมไวยากรณ์เทมเพลต
เทมเพลต Vue เป็น HTML ที่ถูกต้องและเสริมด้วยไวยากรณ์พิเศษ:
- การแทรกข้อความด้วยมัสแตชสำหรับข้อความ
- คำสั่งกำกับ (แอตทริบิวต์ที่มีคำนำหน้า v-) สำหรับกำหนดพฤติกรรม
Vue จะคอมไพล์สิ่งเหล่านี้เป็นฟังก์ชันแสดงผลที่มีประสิทธิภาพ
การแทรกข้อความด้วยมัสแตช
วงเล็บปีกกาคู่หรือไวยากรณ์ มัสแตช ใช้แสดงผลข้อความ
เนื้อหาภายในเป็นนิพจน์ JavaScript ไม่ใช่เพียงชื่อของตัวแปร
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>v-bind สำหรับแอตทริบิวต์
มัสแตชใช้ภายในแอตทริบิวต์ HTML ไม่ได้ ให้ใช้ v-bind เพื่อผูกข้อมูลเข้ากับแอตทริบิวต์
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>รูปแบบย่อของ v-bind
v-bind เป็นคำสั่งที่ใช้บ่อย จึงมีรูปแบบย่อเป็นเครื่องหมายโคลอน
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>v-on สำหรับเหตุการณ์
คำสั่ง v-on รับฟังเหตุการณ์ของ DOM และเรียกตัวจัดการ
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>รูปแบบย่อของ v-on
v-on ก็มีรูปแบบย่อเช่นกัน คือสัญลักษณ์ at
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>ตัวจัดการแบบแทรกในบรรทัดกับตัวจัดการแบบเมธอด
ตัวจัดการเหตุการณ์อาจเป็นนิพจน์ที่เขียนไว้ในบรรทัด หรือชื่อเมธอดก็ได้
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
คำสั่ง v-text กำหนดเนื้อหาข้อความขององค์ประกอบ ซึ่งเทียบเท่ากับมัสแตช
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
คำสั่ง v-html แสดงผลสตริงเป็น HTML จริง ไม่ใช่ข้อความที่ผ่านการหลีกอักขระ
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->ข้อควรระวังเกี่ยวกับ v-html และ XSS
คำเตือน: v-html อันตรายเมื่อใช้กับเนื้อหาที่ไม่น่าเชื่อถือ
- อาจแทรกสคริปต์ที่เป็นอันตรายได้ (การโจมตีแบบ XSS)
- ใช้กับเนื้อหาที่คุณเชื่อถือได้อย่างเต็มที่เท่านั้น
- อย่าแสดงผล HTML ที่ผู้ใช้ส่งมาโดยตรงเด็ดขาด
สำหรับข้อความทั่วไป ให้เลือกใช้การแทรกข้อความด้วยมัสแตชเสมอ เพราะวิธีนี้จะหลีกอักขระ HTML
อาร์กิวเมนต์ของคำสั่งกำกับ
คำสั่งกำกับบางรายการรับ อาร์กิวเมนต์ หลังเครื่องหมายโคลอน เช่น แอตทริบิวต์หรือเหตุการณ์ที่ต้องการระบุ
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับการแทรกข้อความและคำสั่งกำกับ
สรุป: การแทรกข้อความและคำสั่งกำกับ
คุณได้เรียนรู้พื้นฐานเทมเพลต Vue:
- {{ }} มัสแตชใช้แสดงผลนิพจน์ข้อความ
- v-bind (รูปแบบย่อ :) ใช้ผูกแอตทริบิวต์
- v-on (รูปแบบย่อ @) ใช้จัดการเหตุการณ์
- v-text ใช้กำหนดเนื้อหาข้อความ
- v-html ใช้แสดงผล HTML ดิบ (มีความเสี่ยง XSS จึงต้องใช้อย่างระมัดระวัง)
ถัดไป: เงื่อนไขและลูป
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 42
- บทเรียน
- 156
คำถามที่พบบ่อย
บทเรียน “การแทรกค่าและคำสั่ง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การแทรกค่าและคำสั่ง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การแทรกค่าและคำสั่ง”
ใช้การแทรกค่าด้วยวงเล็บปีกกาและคำสั่งหลักในเทมเพลต คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน
บทเรียน “การแทรกค่าและคำสั่ง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การแทรกค่าและคำสั่ง
- เงื่อนไขและลูป
- การผูกแอตทริบิวต์และคลาส