Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

Vue.js Events

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Vue can capture events like click events and key press events. An event occurs whenever the user does something with the app: mouse clicks, key presses etc.

Vue events

To connect an event to a HTML element, add v-on in the HTML tag.

Vue supports these events:

  • v-on:click
  • v-on:keydown
  • v-on:submit

click event

To capture a click event, add v-on:click to an HTML element. Between the quotes, write the name of your method.

<button v-on:click="hello">click</button>

In your app.js define the method:

methods: {
hello() {
this.message = 'method called';
}
}

keydown event

Vue can get keypress events with v-on:keydown.

If you press a key in an input field, you can call a method using the event parameter:

<div id="app">
{{ message }}
<input v-on:keydown="key"></input>
</div>

You can get the key code and key value with:

new Vue({
el: '#app',
data: {
message: 'vuejs model'
},
methods: {
key: function(event) {
this.message = 'key ' + event.key + ' (' + event.keyCode + ')';
}
}
});

This works for all HTML elements, you could have a span if you want to catch key presses for the whole page:

<span v-on:keydown="key"></span>

Download Vue.js Examples


← vuejs methods vuejs click →

Posts


© vuejsexamples.net - Privacy Policy - Cookie Policy