The VueJS events

We now meet to talk about the events with VueJS. As for the lessons before, we start from the code of the previous tutorial. Events allow you to trigger a particular process when an action happens during an event (a click in an area, a mouse over a zone, when you press a key).

The v-on tag of VueJS

In order to observe certain events under VueJS, the "v-on" function can be used. When an event is triggered on a DOM element, then the associated function will be unlinked.

For exemple, the following code (/src/App.vue):

<template>
  <div id="app">
    <h1>{{ title }} </h1>
     <input v-model="title" v-on:click="callMethod">
  </div>
</template>

<script>
module.exports = {
  data: function() {
       return {
          title: 'Title of my application'
        }
  },
  methods: {
    callMethod : function (event){
        alert('Hello : '+ this.title);
    }
  }

}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

You can see here v-on:click="callMethod" it allows us to tell VueJS "on this input element,for each "click" event,you will launch the "callmMethod" function.
You can also do it with the "change" event, to launch the function each time the text in the input field change:

<input v-on:change="callMethod">

and with the "keyup" event, you can trigger the function each time you use your keyboard on the selected element:

<input v-on:keyup="callMethod">

The callMethod function will get the "title" and display in by putting "Hello: " at the start.

The event modifiers viewJS

Often when you want to do a processing following an event, you call a javascript method like event.preventDefault() for example. To avoid this work, and to simplify your code, VueJS has planned what is called an "event modifier" for the v-on function. Just put one of the following keywords after the name of the event in your v-on statement:

- stop stop the propagation of the click

 <input type="submit" v-on:click.stop="callMethod">
 

- prevent prevents the submit event from reloading the page

<input v-model="prevent" v-on:click.self="callMethod">

- capture captures the events that would occur in the "child" elements

<input v-model="title" v-on:click.capture="callMethod">

- self does not start the function on this element unless the event is indeed on this element and not on one of the elements "son"

<input v-model="title" v-on:click.self="callMethod">
     

- once ensure that the event is launched only once.

 <input v-model="title" v-on:click.once="callMethod">
 

Event modifiers can be combined when they are written to the string. Like this :

 <input v-model="title" v-on:click.stop.prevent="callMethod">
 

The key modifiers viewJS

When you want to capture the keyboard keys that have been typed by the user, VueJS provides specific instructions called "key modifiers".
These instructions will be used as modified events, but instead of following the standard javascript events (onclick etc ...), they can only be used on key-specific events (keyup, keydown, ...) .

For example, if I want to run my callMethod method when I press the "1" key (code 49) in the text field I will do this:

<input v-on:keyup.49="callMethod">
    

Some code have an alias, for the "enter" key I will do this:

<input v-on:keyup.enter="callMethod">
    

This will work with the ".enter",".tab",".delete",".esc",".space",".up",".down",".left" and ".right" keys . You can also make key combinations with the keys: ".ctrl", "alt", ".shift" and ".meta" (Windows key, apple, cmd, call it as you like;)). Example of combination with these keys, if I do "control" + "a" (code: 65):

<input v-on:keyup.ctrl.65="callMethod">
    

and they can be chained together. If I do "control" + "alt" + "a" (code: 65):

<input v-on:keyup.ctrl.alt.65="callMethod">
    

To retrieve the code of a key, you can go to the site "keycode.info". And now you know how to use events vujs now it's up to you to play!