イベント

イベントとは

プログラミング言語におけるイベントとは様々な意味を持ちますが、Vue.js においては Vue.js で作成したメソッドを起動することを意味します。

イベントの起動方法

Vue.js のメソッドを起動するには、Vue.js が提供するディレクティブを利用します。具体的には、v-on ディレクティブを利用します。v-on は Vue.js のイベントをアクセスするために HTML コードに追加するディレクティブです。v-on を利用することで、Vue.js で作成した機能にアクセスできます。

ディレクティブの使用方法

実際に使ってみましょう。以下がサンプルコードです。

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

上記コードでは、以下のように v-on を使用しています。

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

クリック時に greeting 関数が呼び出されるように、v-on:click を使用して設定しています。

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

Vue.js 側で greeting 関数を作成し、message 変数に"World"を追加しています。

以上のコードはいつでもダウンロードできるので、分からなかった方は実際にコードを試してみて確認してみましょう。

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

← ディレクティブを自作して再利用しよう！
Vue.js入門|60行で簡単作成!!最小構成のTODOアプリケーションを作成しよう →