การเขียนคำสั่งแบบกำหนดเอง
app.directive(), ฮุก mounted/updated/unmounted อาร์กิวเมนต์และตัวปรับแต่งของคำสั่ง
การเขียนคำสั่งแบบกำหนดเอง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
เมื่อคอมโพเนนต์ไม่เพียงพอ
การนำกลับมาใช้ใหม่ส่วนใหญ่ใน Vue เกิดขึ้นผ่านคอมโพเนนต์และฟังก์ชันที่นำกลับมาใช้ได้ แต่ตรรกะบางอย่างทำงานกับ DOM โดยตรง เช่น การโฟกัสช่องป้อนข้อมูลโดยอัตโนมัติ การผสานรวมไลบรารีที่ไม่ใช่ Vue หรือการวัดขนาดองค์ประกอบ directive แบบกำหนดเองถูกสร้างขึ้นมาเพื่อจัดการงานเหล่านี้โดยเฉพาะ
directive แบบพื้นฐาน
ลงทะเบียน directive กับแอปด้วย app.directive ฮุกหลังติดตั้งจะได้รับองค์ประกอบ ดังนั้น directive นี้จึงโฟกัสช่องป้อนข้อมูลเมื่อองค์ประกอบปรากฏขึ้น
const app = createApp(App)
app.directive('focus', {
mounted(el) { el.focus() }
})การใช้ directive
นำไปใช้ในแม่แบบด้วยคำนำหน้า v- ตามด้วยชื่อที่ลงทะเบียนไว้
<template>
<input v-focus />
</template>directive เฉพาะที่ใน script setup
ภายใน <script setup> ตัวแปรระดับบนสุดใดก็ตามที่ขึ้นต้นด้วย v และเป็น camelCase จะกลายเป็น directive ที่ใช้งานได้ ตั้งชื่อเป็น vFocus และใช้ในรูปแบบ v-focus
<script setup>
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>ออบเจ็กต์การผูก
ฮุกทุกตัวจะได้รับออบเจ็กต์ binding เป็นอาร์กิวเมนต์ตัวที่สอง ออบเจ็กต์นี้เก็บค่า อาร์กิวเมนต์ และตัวปรับแต่งของ directive ที่ส่งมาจากแม่แบบ
app.directive('demo', {
mounted(el, binding) {
console.log(binding.value, binding.arg, binding.modifiers)
}
})การส่งค่า
นิพจน์หลังเครื่องหมายเท่ากับจะกลายเป็น binding.value ในที่นี้มีการส่งสีเข้าไปและนำสีนั้นไปใช้กับองค์ประกอบ
<!-- template -->
<p v-color="'red'">Hello</p>
<!-- directive -->
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value }
})การส่งอาร์กิวเมนต์
ส่วนหลังเครื่องหมายโคลอนจะกลายเป็น binding.arg ช่วยให้ directive เดียวทำงานแตกต่างกันได้ตามป้ายกำกับ
<!-- v-pin:top means binding.arg === 'top' -->
<div v-pin:top="20"></div>การใช้ตัวปรับแต่ง
ตัวปรับแต่งจะปรากฏหลังจุด และมาถึงใน binding.modifiers ในรูปแบบแผนผังค่าบูลีน ใช้ตัวปรับแต่งเหล่านี้เพื่อปรับพฤติกรรม
<!-- v-pin.fixed -> binding.modifiers.fixed === true -->
<div v-pin.fixed="10"></div>ฮุกวงจรชีวิตของ directive
directive มีฮุกที่สอดคล้องกับวงจรชีวิตของคอมโพเนนต์ ได้แก่ created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount และ unmounted
การตอบสนองต่อการอัปเดต
ฮุก updated จะทำงานหลังจากองค์ประกอบเรนเดอร์ใหม่ เปรียบเทียบ binding.value กับ binding.oldValue เพื่อทำงานเฉพาะเมื่อมีการเปลี่ยนแปลงจริง และทำความสะอาดใน unmounted
app.directive('color', {
mounted(el, binding) { el.style.color = binding.value },
updated(el, binding) {
if (binding.value !== binding.oldValue) el.style.color = binding.value
}
})directive เทียบกับคอมโพเนนต์
ควรใช้คอมโพเนนต์กับทุกสิ่งที่เกี่ยวข้องกับโครงสร้างหรือสถานะ เลือกใช้ directive เฉพาะเมื่อต้องเข้าถึง DOM ระดับล่างโดยตรง ซึ่งไม่เหมาะกับคอมโพเนนต์ เช่น การจัดการโฟกัสหรือวิดเจ็ต DOM จากภายนอก
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับ directive แบบกำหนดเอง
สรุป
คุณได้เรียนรู้การสร้าง directive แบบกำหนดเองแล้ว:
- ลงทะเบียนแบบส่วนกลางด้วย
app.directiveหรือแบบเฉพาะที่เป็นvNameใน script setup binding.value,binding.argและbinding.modifiersใช้ส่งข้อมูลเข้าไป- ฮุกวงจรชีวิต: การสร้าง, beforeMount, การติดตั้ง, beforeUpdate, การอัปเดต, beforeUnmount และการถอดติดตั้ง
- ใช้ directive กับงาน DOM ระดับล่าง และเลือกใช้คอมโพเนนต์ในกรณีอื่น
คำถามที่พบบ่อย
บทเรียน “การเขียนคำสั่งแบบกำหนดเอง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเขียนคำสั่งแบบกำหนดเอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเขียนคำสั่งแบบกำหนดเอง”
app.directive(), ฮุก mounted/updated/unmounted อาร์กิวเมนต์และตัวปรับแต่งของคำสั่ง คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การเขียนคำสั่งแบบกำหนดเอง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- v-model: กลไกภายในของการผูกข้อมูลสองทาง
- ตัวปรับแต่งเหตุการณ์ v-on
- การผูกแบบไดนามิกและการผูกหลายรายการด้วย v-bind
- การเขียนคำสั่งแบบกำหนดเอง