vue.js ต้องเรียนรู้ทุกวันและตัวจัดการกิจกรรม

โปรเซสเซอร์วิธีการ

คุณสามารถใช้คำสั่ง v-on เพื่อฟังเหตุการณ์ DOM:

 <div id = "ตัวอย่าง"> <ปุ่ม v-on: click = "greet"> ทักทาย </button> </div>

เราผูกมัดตัวจัดการเหตุการณ์คลิกกับวิธีการทักทาย ต่อไปนี้เป็นวิธีที่กำหนดไว้ในอินสแตนซ์ VUE:

 var vm = new vue ({el: '#example', ข้อมูล: {ชื่อ: 'vue.js'}, // กำหนดวิธีการใน `methods 'object: {great: ฟังก์ชั่น (เหตุการณ์) {// ในเมธอด` จุดนี้เป็นจุดเริ่มต้น (' hello ' + this.name +'! ' }}) // คุณสามารถเรียกเมธอด vm.greet () ในรหัส JavaScript // -> 'hello vue.js!'

ทดสอบด้วยตัวเอง

โปรเซสเซอร์คำสั่งแบบอินไลน์

นอกเหนือจากการเชื่อมโยงกับวิธีการโดยตรงคุณยังสามารถใช้คำสั่ง JavaScript แบบอินไลน์:

 <div id = "example-2"> <button v-on: click = "say ('hi')"> ทักทาย </button> <ปุ่ม v-on: click = "say ('อะไร')"

 ใหม่ vue ({el: '#example-2', วิธีการ: {say: function (msg) {alert (msg)}}}})

คล้ายกับ Inline Expressions ตัวจัดการเหตุการณ์ถูก จำกัด ไว้ที่หนึ่งคำสั่ง

บางครั้งก็จำเป็นต้องเข้าถึงเหตุการณ์ DOM ดั้งเดิมในโปรเซสเซอร์คำสั่งแบบอินไลน์ คุณสามารถใช้เหตุการณ์ $ ตัวแปรพิเศษเพื่อส่งผ่านไปยังวิธีการ:

<ปุ่ม v-on: click = "say ('hello!', $ event)"> ส่ง </button>

 // ... วิธีการ: {พูด: ฟังก์ชั่น (msg, เหตุการณ์) {// ตอนนี้เราสามารถเข้าถึงเหตุการณ์เหตุการณ์เนทีฟ event.preventdefault ()}}

ตัวดัดแปลงเหตุการณ์

ในโปรเซสเซอร์เหตุการณ์จะต้องใช้ Event.preventDefault () หรือ Event.stoppropagation () แม้ว่าเราสามารถทำได้อย่างง่ายดายภายในวิธีการ แต่ก็จะดีกว่าถ้ามีวิธีการเป็นตรรกะข้อมูลบริสุทธิ์โดยไม่ต้องจัดการรายละเอียดเหตุการณ์ DOM

เพื่อแก้ปัญหานี้ Vue.js ให้ V-ON พร้อมตัวดัดแปลงเหตุการณ์สองรายการ:. PREVENT และ. Stop คุณจำได้ไหมว่าตัวดัดแปลงเป็นคำแนะนำที่เริ่มต้นด้วย DOT?

 <!-ป้องกันเหตุการณ์คลิกจาก Bubbled-> <a v-on: click.stop = "dothis"> </a> <!-ส่งเหตุการณ์ไม่มากเกินไปอีกต่อไป-> <ฟอร์ม v-on: submit.prevent = "onsubmit"> </form> <! V-on: submit.prevent> </form>

1.0.16 เพิ่มสองตัวดัดแปลงเพิ่มเติม:

 <!-ใช้โหมดการจับภาพเมื่อเพิ่มฟังเหตุการณ์-> <div v-on: click.capture = "dothis"> ... </div> <!-การเรียกกลับถูกเรียกใช้เฉพาะเมื่อเหตุการณ์ถูกเรียกใช้องค์ประกอบของตัวเอง

ตัวดัดแปลงหลัก

เมื่อฟังเหตุการณ์แป้นพิมพ์เรามักจะต้องตรวจจับกุญแจ vue.js อนุญาตให้เพิ่มตัวดัดแปลงคีย์ลงใน V-on:

 <!-vm.submit () เรียกได้ก็ต่อเมื่อปุ่มคือ 13-> <อินพุต V-on: keyup.13 = "ส่ง">

โปรดจำไว้ว่าปุ่มกดทั้งหมดเป็นเรื่องยาก vue.js ให้นามแฝงสำหรับคีย์ที่ใช้กันมากที่สุด:

 <!-เหมือนกับด้านบน-> <อินพุต v-on: keyup.enter = "ส่ง"> <!-ไวยากรณ์ตัวย่อ-> <อินพุต @keyup.enter = "ส่ง">

นามแฝงที่สำคัญทั้งหมด:

•เข้า

•แท็บ

•ลบ

• ESC

•ช่องว่าง

•ขึ้น

•ลง

•ซ้าย

•ขวา

1.0.8+: รองรับนามแฝงคีย์ตัวอักษรเดียว

1.0.17+: คุณสามารถปรับแต่งคีย์นามแฝง:

 // คุณสามารถใช้ @keyup.f1vue.directive ('on'). keycodes.f1 = 112

ทำไมต้องฟังเหตุการณ์ใน HTML?

คุณอาจสังเกตเห็นว่าวิธีการตรวจสอบเหตุการณ์ประเภทนี้ขัดกับแนวคิดดั้งเดิมของ "การแยกความกังวล" ไม่ต้องกังวลเพราะวิธีการจัดการเหตุการณ์ Vue.js ทั้งหมดและการแสดงออกนั้นถูกผูกไว้อย่างเคร่งครัดกับ ViewModel ของมุมมองปัจจุบันและจะไม่ทำให้เกิดปัญหาการบำรุงรักษาใด ๆ ในความเป็นจริงมีประโยชน์หลายประการในการใช้ V-ON:

1. สแกนเทมเพลต HTML และคุณสามารถค้นหาวิธีการที่สอดคล้องกันในรหัส JavaScript ได้อย่างง่ายดาย

2. เนื่องจากคุณไม่จำเป็นต้องผูกเหตุการณ์ด้วยตนเองใน JavaScript รหัส ViewModel ของคุณอาจเป็นตรรกะที่บริสุทธิ์มากแยกออกจาก DOM อย่างสมบูรณ์ทำให้การทดสอบง่ายขึ้น

3. เมื่อ ViewModel ถูกทำลายโปรเซสเซอร์เหตุการณ์ทั้งหมดจะถูกลบโดยอัตโนมัติ คุณไม่ต้องกังวลเกี่ยวกับวิธีทำความสะอาดตัวเอง

บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น