มาดูวิธีการใช้ การใช้ Event Listeners ใน VueJs ใน VueJs กัน

ในการ listeners event ใน vue นั้น เราจะใช้ v-on ตามตัวอย่างด้านล่าง

<button v-on:click="increment">{{ count }}</button>

เนื่องจาก v-on ใช้บ่อย ดังนั้นเราสามารถเขียน v-on ในรูปแบบสั้น ๆ ได้ ตามตัวอย่างโค้ดด้านล่าง

<button @click="increment">{{ count }}</button>

ตัวอย่างโค้ด เราจะสร้างฟังก์ชัน increment ซึ่งสามารถประกาศไว้ใน <script setup> ได้ ตามตัวอย่าง

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  // update component state
  count.value++
}
</script>

ตัวอย่างโค้ดแบบเต็ม

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">count is: {{ count }}</button>
</template>

ที่มา https://vuejs.org/tutorial/#step-4