【Vue.js】メソッドとイベントハンドリングについて

Web

2019.09.29

メソッド
イベントハンドリング
1. this
イベントの種類と修飾子
まとめ

メソッド

Vue.jsにおけるメソッドは、methodsプロパティとして次のように定義することができます。

const app = Vue({
  //・・・
  methods: {
    method1: function(arg) {
      //method1 process
    },
    method2(arg) {
      //method2 proccess
    }
  }
  //・・・
})

メソッドはイベントハンドラとして利用されることが多いです。

イベントハンドリング

Vue.jsではv-onディレクティブを用いることでイベントのハンドリングが可能になります。
省略形として「@」を利用できます。

例えばクリックイベントの場合、次のように設定します。

<div id="app">
  <p>{{count}}</p>
  <button v-on:click="add">ボタン1</button>
  <button @click="count++">ボタン2</button>
</div>

const app = Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    add() {
      this.count++
    }
  }
})

ボタン1、ボタン2のどちらをクリックしても数字がカウントアップされていきます。
メソッドを指定することがほとんどですが、簡単な処理であれば直接設定することもできます。

this

Vueオブジェクト内で自身の要素を使用する場合は、thisを明示的に指定する必要があります。

先程のadd()メソッド内では、this.count++ のようにthisを用いてcountを使用しています。
メソッドの場合も同じく、例えば他メソッドでadd()メソッドを利用する場合は、this.add() と呼び出します。

イベントの種類と修飾子

イベントの種類と修飾子についてはこちらの記事を御覧ください。

【Vue.js】イベントハンドリングをサンプルを作りながら理解する

Vue.jsのイベントハンドリングについて、CodePenで作成したサンプルを元に紹介していきます。

まとめ

Vue.jsやWEBに限った話ではないでしょうが、イベントの理解をおろそかにしてしまうと予期せぬ動作を招いてしまうことがあります。

特に動きのあるページやシステムを作る場合はしっかりと理解しておきたいですね。

- Vue.jsのおすすめ書籍はコチラ -