Vue.Js Event Handling
Vue.Js Event Handling:–We all are familiar with dom events ; they happen when a user perform some action to see the changes on web page. Hence DOm events make a web page’s layout more interative
In this tutorial we will learn how do those events emit and triggered on some web elements like button.
Here we take v-on directive to listen to the button click event when a use clicks on a button.
Vue.Js Event Handling | Example
Let us understand the concept of events by an example given below. In below example a variable named counterwill be incremented by one value each time we will click on button. So v-on directive is responsible to listen the click event everytime on each click and you can see the changing value of “counter” by clicking the button.
For your convenience we have given the output screenshot where from you can verify the output of your program if you run on your machine.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<script>
</script>
</head>
<body>
<div id="app">
<button v-on:click="counter += 1">Counter</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</body>
</html>
|
Vue.Js Method Event Handler | Example
In herewe can see that we have bound a method button_click on click of a button. So here this method acts as an event handler which is much robust than above counter example.
Note:–We can also replace v-on directive by the following annotation
<button @click="button_click">click</button>
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="button_click">click</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Tutorialsplane'
},
methods: {
button_click: function (event) {
alert('Hello ' + this.message + '!')
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>
</body>
</html>
|
Inline Event Handler | preventDefault() | Example
Here we will call a event handler on method call but one thing to remember is method takes a parameter and gives it to the javascript object which serves to this event. Hence here we call method inside javascript object inside vue instance.
Sometimes we need to apply preventDefault() a DOM event on template element on web page. So below is a brief description of this event.
In our program StopClick button will be stopping working when we try to click and execute it.
Example
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="app">
<button id="Button" v-on:click="button_click('10')">click</button>
<button v-on:click="prevent('Button clicking is restricted by using preventDefault()', $event)">
StopClick</button>
</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Tutorialsplane'
},
methods: {
button_click: function(msg) {
alert('The Number is::' + msg + '!')
if (event) {
alert(event.target.tagName)
console.log(event.target)
}
},
prevent: function (message, event) {
event.preventDefault()
console.log(event.target)
}
}
})
</script>
</body>
</html>
|
Advertisements
