We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked { { counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
});
The button above has been clicked {{ counter }} times.
In the above example, we we using inline JS expression as the event handler. In real life the hander contains multiple line and inline expression is not appropriate. That's why v-on can take any method name which you can use as event handler. v-on can also accept the name of a method you’d like to call. But how and where would you define the method? Look below -
<div id="example-2">
<button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// define methods under the `methods` object
methods: {
greet: function (event) {
// `this` inside methods points to the Vue instance
alert('Hello ' + this.name + '!')
// `event` is the native DOM event
if (event) {
alert(event.target.tagName)
}
}
}
});
The Vue instance can take an object method in which you can define as many method you want. And call that method from the v-on directive. That's all.
If you have multiple methods, you can seperate them with the comma.
You can pass as many argument u want, the corresponding method should have exact same parameter to capture all the argument that is being passed. You can pass the Vue property (Properties that is inside the data object) to the method directly.
<div id="example-2">
<button v-on:click="greet('hi', name)">Greet</button>
</div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
methods: {
greet: function (say, name) {
alert(say + " " + name)
}
}
});
Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable:
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
methods: {
warn: function (message, event) {
// now we have access to the native event
if (event) event.preventDefault()
alert(message)
}
}
Here, $event is the object which contains everything about the Click event. You can get the element on which the click event occured etc, using the $event object. Note that the order doesn't matter. The following is the same -
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
methods: {
warn: function (message, event) {
// now we have access to the native event
if (event) event.preventDefault()
console.log(event.target);
alert(message)
}
}
Be careful to preceed event with $ sign($event).
Inside the method you can access the Vue properties using this keyword. The keyword this refers to the Vue instance inside which the method exists. Like the following -
data:{
name : "Vue.js"
}
methods:{
greet:function(){
console.log(this.name);
}
}
You can even call another method using this -
data:{
name : "Vue.js"
}
methods:{
greet:function(){
console.log(this.name);
this.sayMyName();
},
sayMyName:function(){
console.log("Hello World");
}
}
It is a very common need to call event.preventDefault() or event.stopPropagation() inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.
To address this problem, Vue provides event modifiers for v-on. Modifiers are directive postfixes denoted by a dot. You can use the following modifier for the v-on directive.
.stop.prevent.capture.self.onceThis will cause the Event propagation for the event. It means it will stop the Event Bubbling. Event Bubbling is a feature in JS. In Event Bubbling, the event travells through it's accentors.
<a v-on:click.stop="methodName"></a>
This will stop the default behaviour of the element when an event is occured. This is same as writting event.preventDefault() inside the method.
<button v-on:click.prevent="methodName"></button>
You can even chain the modifiers -
<a v-on:click.stop.prevent="doThat"></a>
Be careful when you are chaining multiple modifiers. Because their orders matter. In case you are confusing about the orders of modifiers, it's better to write those functionality within the method. For example using @click.prevent.self will prevent all clicks while @click.self.prevent will only prevent clicks on the element itself.
In real life when we are using Ajax, it is common to call event.preventDefault() on the form. Instead of calling method you can just have the modifer.
<form v-on:submit.prevent></form>
This won't call any method but it will call event.preventDefault()
When listening for keyboard events, we often need to check for common key codes. Vue also allows adding key modifiers for v-on when listening for key events:
<input v-on:keyup.13="submit">
But no one doesn't remember all the ASCII code for every key. To deal with that you can use keywords. Here's the full list of keywords you can use as key modifiers -
.enter.tab.delete // Delete and Backspace key both.esc.space.up.down.left.rightThat's all. If you want to use other key, you always have the option to use the ASCII code as the modifiers. But what if you want to define a keyword for a certain key? You can use the following syntax -
Vue.config.keyCodes.a = 65
You should use this syntax outside of the Vue syntax. Now you can use the following -
<input type="text" v-on:keyup.a="hi">
methods:{
hi:function(){
console.log("Hi");
}
}
In Vue, there are other modifiers you can use like PageDown, CTRL + Key, ALT + Key etc. But this is not useful right now. If you need to work on an application where keyboard shortcut is needed then this feature will be useful for you. It also supports mouse button click modifiers. You can check out the Vue's documentation for more about key modifieres here
// full syntax <a v-on:click="doSomething"> ... </a> // shorthand <a @click="doSomething"> ... </a>
There is no difference between the two, one is just a shorthand for the second.