8). Vue.js Methods and Event Handling

We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered.

Example 1:- JS fiddle

<div id="vue-instance">
      Enter your name: <input type="text" v-model="name">
     <button v-on:click="sayHello">Hey there!</button>

</div>
var vm = new Vue({ 

      el: '#vue-instance', 

      data: { 

           name: '' 

      }, 

 methods: { 

          sayHello: function(){ 

           alert('Hey there, ' + this.name); 

         } 

      }

});

Example 2:- 

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

Event Modifiers

There are list of event modifiers available 

• .stop
• .prevent
• .capture
• .self
• .once
• .passive
• .once

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- modifiers can be chained -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- just the modifier -->
<form v-on:submit.prevent></form>

<!-- use capture mode when adding the event listener -->
<!-- i.e. an event targeting an inner element is handled here before being handled by that element -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

<!-- the click event will be triggered at most once -->
<a v-on:click.once="doThis"></a>

<!-- the scroll event's default behavior (scrolling) will happen -->
<!-- immediately, instead of waiting for `onScroll` to complete -->
<!-- in case it contains `event.preventDefault()` -->
<div v-on:scroll.passive="onScroll">...</div>

Key Modifiers

List of key modifier available in vue.js

• .enter
• .tab
• .delete  (captures both “Delete” and “Backspace” keys)
• .esc
• .space
• .up
• .down
• .left
• .right
  

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

// enable `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

<input @keyup.page-down="onPageDown">

<!-- this will fire even if Alt or Shift is also pressed -->
<button @click.ctrl="onClick">A</button>

<!-- this will only fire when Ctrl and no other keys are pressed -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- this will only fire when no system modifiers are pressed -->
<button @click.exact="onClick">A</button>