Vue.js เป็นไลบรารี่ที่ทรงพลัง ง่ายต่อการเรียนรู้ และเข้าถึงได้ ซึ่งด้วยความรู้เกี่ยวกับ HTML, CSS และ Javascript เราสามารถเริ่มสร้างเว็บแอปพลิเคชันในนั้นได้ Vue.js สร้างขึ้นจากการรวมคุณสมบัติที่ดีที่สุดจาก Angular ที่มีอยู่แล้วและตอบสนอง Frameworks เป็นเฟรมเวิร์ก Javascript แบบก้าวหน้าและตอบสนองที่ใช้ในการสร้าง UI (ส่วนต่อประสานผู้ใช้) และ SPA (แอปพลิเคชันหน้าเดียว) ซึ่งเป็นสาเหตุที่นักพัฒนาชอบเขียนโค้ดและรู้สึกอิสระและสบายใจในขณะที่พัฒนาแอปพลิเคชันใน Vue.js ถ้าเรา ดูที่ Event Listening and Handling ใน Vue.js. เราจะรู้ว่ามันให้คำสั่ง v-on เพื่อฟังและจัดการเหตุการณ์ เราสามารถใช้คำสั่ง v-on เพื่อฟัง DOM และทำงานที่จำเป็นได้ นอกจากนี้ยังมีตัวจัดการเหตุการณ์มากมาย อย่างไรก็ตาม ในบทความนี้ เราจะเรียนรู้และให้ความสำคัญกับเหตุการณ์การคลิกเท่านั้น เริ่มกันเลย!
เช่นเดียวกับเหตุการณ์ onClick ของ Javascript Vue.js มี v-on:click สำหรับเหตุการณ์การฟัง
ไวยากรณ์สำหรับเหตุการณ์ v-on:click จะเป็นดังนี้:
< ปุ่ม v-on:คลิก='ชื่อฟังก์ชัน'>คลิก</ ปุ่ม >
Vue.js ให้ชวเลข @ แทนที่จะใช้ v-on เช่นกัน
< ปุ่ม @คลิก='ชื่อฟังก์ชัน'>คลิก</ ปุ่ม >
Vue.js ไม่ได้หยุดเพียงแค่ฟังเหตุการณ์การคลิกและเรียกใช้ฟังก์ชัน นอกจากนี้ยังช่วยให้เราสามารถเขียนการดำเนินการทางคณิตศาสตร์ใดๆ หรือสิ่งที่เกี่ยวข้องกับ Javascript ได้โดยตรงภายในเครื่องหมายคำพูด เช่นนี้:
< ปุ่ม @คลิก='จำนวน += 1'>เพิ่ม</ ปุ่ม >
Vue.js ให้เราสามารถเรียกใช้เมธอดหรือฟังก์ชันในคำสั่ง inline Javascript ดังที่แสดงด้านล่าง:
< ปุ่ม @คลิก='ข้อความ('สวัสดี')'>แสดง</ ปุ่ม >ด้วยการใช้ตัวจัดการเหตุการณ์ของ Vue.js เราสามารถเข้าถึงเหตุการณ์ DOM ได้เช่นกัน โดยใช้คำสั่งแบบอินไลน์ โดยส่งตัวแปร $event ของ Vue.js ที่จัดเตรียมไว้โดยเฉพาะไปยังอาร์กิวเมนต์ของเมธอด เช่นเดียวกับตัวอย่างด้านล่าง:
< ปุ่ม @คลิก='message('สวัสดี', $เหตุการณ์)'>ส่ง</ ปุ่ม >
Vue.js ยังช่วยให้เราสามารถเรียกใช้ฟังก์ชันหรือวิธีการได้หลายอย่าง เราสามารถเรียกใช้ฟังก์ชันได้มากกว่าหนึ่งฟังก์ชันและคั่นด้วยเครื่องหมายจุลภาค ดังตัวอย่างนี้:
< ปุ่ม @คลิก='first('Hello'), second('Hi', $event) '>ส่ง</ ปุ่ม >Vue.js มีตัวแก้ไขเหตุการณ์ด้วย
ตัวแก้ไขเหตุการณ์
เรามักจะต้องเรียกตัวดัดแปลงพร้อมกับเหตุการณ์ ดังนั้น Vue.js จึงมีตัวแก้ไขบางส่วนดังต่อไปนี้:
.หยุด
จะหยุดการส่งเหตุการณ์การคลิก
< ถึง @click.stop='ทำเช่นนี้'></ ถึง >.ป้องกัน
มันจะป้องกันไม่ให้หน้าโหลดซ้ำหรือเปลี่ยนเส้นทาง
< รูปร่าง @submit.prevent='ส่ง'></ รูปร่าง >.ครั้งหนึ่ง
มันจะทริกเกอร์เหตุการณ์การคลิกเพียงครั้งเดียว
< ถึง @คลิก.ครั้งเดียว='ทำเช่นนี้'></ ถึง >.การจับกุม
ส่วนใหญ่จะใช้เพื่อเพิ่มตัวฟังเหตุการณ์
< div @click.capture='ทำเช่นนี้'> ...</ div >เราสามารถโยงโมดิฟายเออร์ได้เช่นกัน อย่างไรก็ตาม พึงระลึกไว้เสมอว่าลำดับของการปรับเปลี่ยนมีความสำคัญ และจะส่งผลต่อผลลัพธ์
< ถึง @click.stop.prevent='ทำอย่างนั้น'></ ถึง >บทสรุป
ในบทความนี้ เราได้กล่าวถึงแนวคิดการจัดการเหตุการณ์ Click ทั้งหมดตั้งแต่ระดับ noob ถึงระดับนินจา เราได้เรียนรู้เกี่ยวกับรูปแบบต่างๆ ของการเขียนเหตุการณ์การคลิกและวิธีการใช้ |_+_| . ต่างๆ คำสั่งที่จัดทำโดย Vue.js เพื่อความสะดวกของนักพัฒนาและตัวแก้ไขเหตุการณ์ต่างๆ สำหรับเนื้อหาที่เป็นประโยชน์เพิ่มเติมเช่นนี้ ซึ่งเกี่ยวข้องกับ Vue.js โปรดไปที่ linuxhint.com ต่อไป