Examples of some VueJS Events

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;
    }
  }
});

---