Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 9: การจัดการ Event ใน Vue.js

1. การจัดการ Event คืออะไร?

การจัดการ Event ใน Vue.js ช่วยให้คุณสามารถตอบสนองต่อการกระทำของผู้ใช้ เช่น การคลิก การเลื่อนเมาส์ หรือการกรอกข้อมูลในฟอร์ม โดยใช้ Directive v-on หรือสั้น ๆ คือ @

2. การใช้ v-on (หรือ @)

การจัดการ Event เบื้องต้น

<template>
  <div>
    <button v-on:click="sayHello">Click Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert('Hello, Vue.js!');
    }
  }
};
</script>

ผลลัพธ์:
เมื่อคลิกปุ่ม จะมีข้อความแจ้งเตือนว่า “Hello, Vue.js!”

ใช้ @ แทน v-on

<template>
  <div>
    <button @click="sayHello">Click Me</button>
  </div>
</template>

คำอธิบาย:
@ เป็นรูปแบบย่อของ v-on ที่ช่วยให้โค้ดกระชับขึ้น

3. การส่งค่าให้ Methods

คุณสามารถส่งค่าผ่าน Event ไปยัง Methods ได้โดยใช้ Syntax ด้านล่าง:

<template>
  <div>
    <button @click="greet('Alice')">Greet Alice</button>
    <button @click="greet('Bob')">Greet Bob</button>
  </div>
</template>

<script>
export default {
  methods: {
    greet(name) {
      alert(`Hello, ${name}!`);
    }
  }
};
</script>

ผลลัพธ์:
เมื่อคลิกปุ่ม จะมีข้อความแจ้งเตือน เช่น “Hello, Alice!” หรือ “Hello, Bob!”

4. การส่ง Event Object

ใน Vue.js คุณสามารถเข้าถึง Event Object ได้โดยอัตโนมัติ หรือใช้ $event เพื่อส่ง Event Object ไปยัง Methods

ตัวอย่าง:

<template>
  <div>
    <button @click="showEvent($event)">Show Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    showEvent(event) {
      console.log(event);
    }
  }
};
</script>

คำอธิบาย:

  • event มีข้อมูลเกี่ยวกับการคลิก เช่น ตำแหน่งเมาส์ และปุ่มที่ถูกกด
  • สามารถดูรายละเอียดใน Console

5. การใช้ Modifiers กับ Event

Modifiers เป็นคำสั่งเพิ่มเติมที่ใช้ปรับแต่งการทำงานของ Event

Modifiers ที่พบบ่อย

  1. .stop: หยุดการกระจาย Event
  2. .prevent: ป้องกันการทำงานเริ่มต้นของ Event
  3. .once: ให้ Event ทำงานเพียงครั้งเดียว
  4. .capture: ใช้ Event ในขั้นตอน Capture

ตัวอย่างการใช้งาน:

<template>
  <div>
    <button @click.stop="sayHello">Click Me</button>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="name" placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    sayHello() {
      alert('Hello!');
    },
    submitForm() {
      alert(`Form submitted with name: ${this.name}`);
    }
  }
};
</script>

คำอธิบาย:

  • .stop หยุดการส่ง Event ไปยังองค์ประกอบอื่น
  • .prevent ป้องกันการรีเฟรชหน้าจอเมื่อส่งฟอร์ม

6. การจับ Event หลายประเภท

คุณสามารถจับ Event หลายประเภทในองค์ประกอบเดียวกันได้

ตัวอย่าง:

<template>
  <div>
    <button @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">Hover Me</button>
  </div>
</template>

<script>
export default {
  methods: {
    onMouseEnter() {
      console.log('Mouse entered');
    },
    onMouseLeave() {
      console.log('Mouse left');
    }
  }
};
</script>

ผลลัพธ์:
เมื่อเมาส์เข้าสู่ปุ่มหรือออกจากปุ่ม จะมีข้อความใน Console

7. การใช้งาน Key Modifiers กับ Input

Key Modifiers ใช้สำหรับจัดการ Event ของแป้นพิมพ์ เช่น Enter, Tab, หรือ Space

ตัวอย่าง:

<template>
  <div>
    <input @keyup.enter="submitName" v-model="name" placeholder="Press Enter to Submit" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    submitName() {
      alert(`Name submitted: ${this.name}`);
    }
  }
};
</script>

ผลลัพธ์:
เมื่อกด Enter ในช่อง Input จะส่งชื่อที่กรอก

8. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับ:

  • การจัดการ Event ด้วย v-on หรือ @
  • การส่งค่าและ Event Object ไปยัง Methods
  • การใช้ Modifiers เพื่อปรับแต่งการทำงานของ Event
  • การจับ Event หลายประเภทและ Key Modifiers

ในบทถัดไป เราจะศึกษาวิธีการใช้ Computed Properties ใน Vue.js!