We can use the v-on directive to listen to DOM events and execute JavaScript code.
The **v-on** directive can be abbreviated as the @ symbol.
Syntax:
v-on:click="methodName" or @click="methodName"
## v-on
This button has been clicked {{ counter }} times.
const app = { data() { return { counter: 0 } } } Vue.createApp(app).mount('#app')
[Try it »](#)
Normally, we need to use a method to call a JavaScript method.
v-on can receive a defined method to call.
## v-on
const app = { data() { return { name: 'Tutorial' } }, methods: { greet(event) { // `this` inside `methods` points to the current active instance alert('Hello ' + this.name + '!') // `event` is the native DOM event if (event) { alert(event.target.tagName) } } } } Vue.createApp(app).mount('#app')
[Try it »](#)
Besides binding directly to a method, you can also use inline JavaScript statements:
## v-on
const app = { data() { }, methods: { say(message) { alert(message) } } } Vue.createApp(app).mount('#app')
[Try it »](#)
Event handlers can include multiple methods, separated by comma operators:
## v-on
const app = { data() { }, methods: { one(event) { alert("First event handler logic...") }, two(event) { alert("Second event handler logic...") } } } Vue.createApp(app).mount('#app')
[Try it »](#)
### Event Modifiers
Vue.js provides event modifiers for v-on to handle DOM event details, such as: event.preventDefault() or event.stopPropagation().
Vue.js invokes modifiers through directive suffixes represented by a dot .
* `.stop` - Stop propagation
* `.prevent` - Prevent default event
* `.capture` - Stop capture
* `.self` - Only listen for events triggered on that element
* `.once` - Trigger only once
* `.left` - Left mouse button event
* `.right` - Right mouse button event
* `.middle` - Middle mouse wheel event
...
...
### Key Modifiers
Vue allows adding key modifiers to v-on when listening for keyboard events:
Remembering all keyCodes is difficult, so Vue provides aliases for the most commonly used keys:
All key aliases:
* `.enter`
* `.tab`
* `.delete` (captures "Delete" and "Backspace" keys)
* `.esc`
* `.space`
* `.up`
* `.down`
* `.left`
* `.right`
System modifier keys:
* `.ctrl`
* `.alt`
* `.shift`
* `.meta`
Mouse button modifiers:
* `.left`
* `.right`
* `.middle`
## Example
Do something
### .exact Modifier
The .exact modifier allows you to control events triggered by precise system modifier combinations.
## Example
YouTip