การผูกตัวจัดการเหตุการณ์ใน Vue

ตอนนี้เรามาเริ่มเรียกใช้เมธอดของเราเมื่อ เกิดเหตุการณ์บางอย่างกัน เพื่อที่จะผูก เหตุการณ์กับองค์ประกอบ DOM บางตัว คุณต้องใช้ directive v-on

ใน directive นี้ หลังจากเครื่องหมาย colon คุณต้องระบุชื่อของเหตุการณ์ และค่าของมันคือชื่อเมธอด ที่ต้องการเรียกเมื่อ เหตุการณ์นั้นเกิดขึ้น

มาลองทำในทางปฏิบัติกัน สมมติว่าเรามีเมธอดต่อไปนี้:

App.vuemethods: {
  show: function() {
    alert('!');
  }
}

สมมติว่าเรามี ปุ่มต่อไปนี้:

App.vue<template>
  <button>text</button>
</template>

มาทำให้เมื่อคลิก ที่ปุ่มนี้แล้วเรียกเมธอด show กัน:

App.vue<template>
  <button v-on:click="show">text</button>
</template>

โดยปกติแล้ว ทุกคนจะใช้รูปแบบย่อของ v-on ซึ่งก็คือ สัญลักษณ์ @ วางไว้หน้า ชื่อเหตุการณ์:

App.vue<template>
  <button @click="show">text</button>
</template>