Event

What is an event?

An event in a programming language has various meanings, but in Vue.js it means invoking a method created in Vue.js.

How to fire an event

To invoke a Vue.js method, use directives provided by Vue.js. Specifically, it makes use of the v-on directive. v-on is a directive that you add to your HTML code to access Vue.js events. By using v-on, you can access functionality created with Vue.js.

How to use directives

Let’s actually use it. Below is the sample code.

<html>
  <head>
    <title>Hello World</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  </head>
  <body>
    <div id="intro" style="text-align:center;">
      <h2> {{ message }}</h2>
      <button v-on:click="greeting">Click ME</button>
    </div>
    <script type="text/javascript">
      var vue_det = new Vue({
        el: '#intro',
        data: {
          message: "Hello"
        },
        methods: {
          greeting: function () {
            this.message += "World";
          }
        }
      });
    </script>
  </body>
</html>

The code above uses v-on as follows:

<button v-on:click="greeting">Click ME</button>

We use v-on:click to set the greeting function to be called on click.

methods: {
  greeting: function () {
    this.message += "World"
  }
}

Create a greeting function on the Vue.js side and add “World” to the message variable.

The code above can be downloaded at any time, so if you don’t understand it, try the code and check it out.

https://github.com/asakura-sakura/wiblok

← Create your own directives and reuse them!
Component →