After learning the VueJS event handling now we will see some examples of VueJS events.
VueJS Events
Click & Double Click Events
v-on:click
|@click
v-on:dblclick
|@dblclick
<div id="myApp">
<button @click="clickMe">Click Me</button>
<button @dblclick="dblClick">Double Click</button>
</div>
var myApp = new Vue({
el:'#myApp',
methods:{
clickMe:function(){
alert('Click Event!');
},
dblClick:function(){
alert('Double Click Event!');
}
}
});
Mouse Move Event
v-on:mousemove
| @mousemove
<style>
.area{
border: 3px solid brown;
width: 200px;
height: 200px;
padding: 10px;
}
</style>
<div id="myApp">
<div class="area" @mousemove="mouseMove">
<div><strong>X</strong> = {{ x }}</div>
<div><strong>Y</strong> = {{ y }}</div>
</div>
</div>
var myApp = new Vue({
el:'#myApp',
data:{
x:0,
y:0
},
methods:{
mouseMove:function(event){
this.x = event.offsetX;
this.y = event.offsetY;
}
}
});
Mouse Over & Mouse Out Events
v-on:mouseover
|@mouseover
v-on:mouseout
|@mouseout
<style>
.area{
border: 3px solid brown;
width: 200px;
height: 100px;
padding: 10px;
}
</style>
<div id="myApp">
<div class="area" @mouseover="mouseOver" @mouseout="mouseOut">
<div><strong>Mouse: </strong> = {{ msg }}</div>
</div>
</div>
var myApp = new Vue({
el:'#myApp',
data:{
msg:"Out"
},
methods:{
mouseOver:function(){
this.msg = "IN";
},
mouseOut:function(){
this.msg = "OUT";
}
}
});
Keydown, Keyup, & Keypress Events
v-on:keydown
|@keydown
v-on:keyup
|@keyup
v-on:keypress
|@keypress
<div id="myApp">
<strong>Keydown</strong><br>
<input type="text" @keydown="_keyDown">
<hr>
<strong>Keyup</strong><br>
<input type="text" @keyup="_keyUp">
<hr>
<strong>Keypress</strong><br>
<input type="text" @keypress="_keyPress">
</div>
var myApp = new Vue({
el:'#myApp',
methods:{
_keyDown:function(){
alert('Keydown Event');
},
_keyUp:function(){
alert('keyup Event');
},
_keyPress:function(){
alert('Keypress Event');
}
}
});
Select, Cut, Paste, and Copy Events
v-on:select
|@select
v-on:cut
|@cut
v-on:paste
|@paste
v-on:copy
|@copy
<div id="myApp">
<textarea
@select="onSelect"
@cut="onCut"
@paste="onPaste"
@copy="onCopy">Select, Cut, Paste, and Copy</textarea>
</div>
var myApp = new Vue({
el:'#myApp',
methods:{
onSelect:function(){
alert('Text Selected');
},
onCut:function(){
alert('Text Cuted');
},
onPaste:function(){
alert('Text Pasted');
},
onCopy:function(){
alert('Text Copied');
}
}
});
Focus and Focus Out Events
v-on:focus
|@focus
v-on:blur
|@blur
<div id="myApp">
<input type="text" @focus="onFocus" @blur="onFocusOut">
<div><br><strong>Status:</strong> - {{ status }}</div>
</div>
var myApp = new Vue({
el:'#myApp',
data:{
status:'Nothing'
},
methods:{
onFocus:function(){
this.status = "Focused"
},
onFocusOut:function(){
this.status = "Focus Out"
}
}
});
On Change Event
v-on:change
| @change
<div id="myApp">
<h2>Choose Animal</h2>
<ul>
<li><strong>Name:-</strong> {{ name }}</li>
<li><strong>Gender:-</strong> {{ gender }}</li>
</ul>
<div>
<strong>Select Name</strong><br>
<select @change="animalName">
<option value="0">Select Animal</option>
<option value="Dog">Dog</option>
<option value="Elephant">Elephant</option>
<option value="Monkey">Monkey</option>
<option value="Pigeon">Pigeon</option>
<option value="Lion">Lion</option>
</select><br><br>
<strong>Select Gender</strong><br>
<input type="radio" name="gender" checked @change="animalGender" value="Male">
<input type="radio" name="gender" @change="animalGender" value="Female">
</div>
</div>
var myApp = new Vue({
el:'#myApp',
data:{
name:'No Selected',
gender:'Male'
},
methods:{
animalName:function(e){
this.name = e.target.value;
},
animalGender:function(e){
this.gender = e.target.value;
}
}
});