Inline and Method Handlers

const count = ref(0)

function greet(event) {
  alert('Hello World!')
  console.log(event)
}

function say(message) {
  alert(message)
}

function warn(message, event) {
  if (event) {
    event.preventDefault()
  }
  alert(message)
}

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

<!-- `greet` is the name of the method defined above -->
<button @click="greet">Greet</button>

<button @click="say('hello')">Say hello</button>


<!-- using $event special variable -->
<!-- using inline arrow function -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

Event Modifiers

Key Modifiers

Mouse Button Modifiers

References

• https://vuejs.org/guide/essentials/event-handling.html