In this post, I have tried to explain about different events in VueJs. In simple words events are action triggered by system for example:
- Mouse Events
- Keyboard Events
Mouse events can be recognized as double click, or on hover event by mouse.
In below example, I am going to explain different events like click event and key event and also I have tried to explain stop propagation and prevent propagation in VueJs. So below is a sample code provided to you.
<!DOCTYPE html>
<html>
<head>
<script src=“../vue.js”></script>
</head>
<body>
<div id=“app”>
<input type=“button” v-on:click=“changeMessage(‘in vue’, $event)” value=“Click here”/>
<p v-on:click=“preventEvents”>
{{mymessage}}
<br><br>
<span v-on:click.stop=“preventEvents”>This is span Element</span>
<a href=“http://google.com” v-on:click.stop.prevent=“preventEvents”>Go to google</a>
</p>
<input type=“text” @keyup.enter.space=“alertMessage” :value=“textStr”>
</div>
<script>
new Vue({
el:“#app”,
data:{
mymessage:“Welcome to Vue.js Learning”,
textStr:“Enter Text”
},
methods:{
changeMessage(str, event){
this.mymessage=“Learn Event Handling “+str
},
preventEvents(){
alert(“This is Tag: “+event.target.tagName);
},
alertMessage(){
alert(“Key Event call”);
}
}
})
</script>
</body>
</html>
Feel free to try this example and comment below.
