Vue js Events

Details

Vue empowers dynamic user interactions using the v-on directive, which binds JavaScript behavior directly to HTML actions.

Interaction Triggers

The essence of user-driven changes lies in binding reactions to HTML triggers. Vue simplifies this through directives that capture user gestures like button presses, mouse movement, key strokes, and input typing.

Response Logic with Functions

Behaviors upon interaction aren’t hardcoded inline — instead, you can assign handlers declared under the methods section. This ensures your application logic stays organized and maintainable.

Vue v-on Syntax

The v-on directive listens for specific browser activities and connects them to internal logic.

<p v-on:click="executeAction">Tap here</p>

You can also use the shorthand @:

<p @click="executeAction">Tap here</p>

Basic Example

Here’s an illustration showing how to increment an internal variable by interacting with a visual control:

  <div id="eventApp">
  <img src="img_moose.jpg">
  <p>{{ "Total Moose: " + moose }}</p>
  <button @click="moose++">Increase Moose</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
  const eventApp = Vue.createApp({
    data() {
      return {
        moose: 0
      }
    }
  })

  eventApp.mount('#eventApp')
</script>

Every click automatically reflects on the interface without needing DOM manipulation, thanks to Vue’s reactivity.

Function Block

When an interaction demands more than a one-liner, encapsulate your actions inside a methods block:

methods: {   
    logMessage() {     
       console.log("Clicked!");   
    } 
}

In template:

<button @click="logMessage">Say Hello</button>

Modifiers

Vue provides suffixes that tweak event behavior. A few useful ones include:

• .prevent – cancels default browser operation (e.g., form submission).
• .stop – stops the event from bubbling upward.
• .once – runs only the first time.
• .capture – listens during capture phase.
• .self – fires only if the element itself is the event source.

Example:

<form @submit.prevent="submitForm">   
  <input type="text" />   
  <button>Send</button> 
</form>

Listenable Events

Common available options:

• click – tapping element
• dblclick – double-click
• mouseover / mouseleave – pointer enters or exits
• keydown / keyup – keyboard keys
• input – user types into field