【Vue.js 2.9】はじめてのVue.js イベントハンドリング

・onClickイベントの記法
・クリックイベント以外のイベント

はじめに

今回はクリックなどのイベント時のハンドリングについての紹介となります。

【Vue.js 2.9】はじめてのVue.js CSSのデータバインディング②（応用編）　・classクラスオブジェクトを用意して呼ぶことも可能　・条件式で適用を反映可能（三項演算子）　・複数クラスオブジェクトを使う場合は...

環境情報

名前	詳細
Vue.js	開発バージョン（https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js）
エディタ	JSFiddle（https://jsfiddle.net/）

onClickイベントの書き方

ボタンを押したら現在日時を取得・表示する処理をサンプルとしています。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <button v-on:click='getNowDateTime'>
    現在日時取得
  </button>
  <p>
    取得結果：{{ now }}
  </p>
</div>

var app = new Vue({
    el: '#app',
    data: {
      now: ''
    },
    methods: {
    	getNowDateTime: function(){
      	  this.now = new Date().toLocaleString()
        }
    }
})

ボタンを押したら現在日時を取得する「getNowDateTime」メソッドを呼んでいます。
getNowDateTimeメソッドではnow変数に現在日時の文字列を格納しています。

メソッドイベントハンドラ取得方法

上記getNowDateTimeメソッドの中でイベントハンドラを取得したい場合は引数に「event」もしくは「$event」を設定することで取得出来ます。

イベントハンドラ以外の引数が無い場合は「event」で問題無く、イベントハンドラ以外の引数がある場合は「$event」を使います。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <button v-on:click='getNowDate'>
    現在日時取得
  </button>
  <p>
    取得結果：{{ now }}
  </p>
  <p>
    クリックタグ：{{ tag }}
  </p>
</div>

var app = new Vue({
    el: '#app',
    data: {
      now: '',
      tag: ''
    },
    methods: {
    	getNowDate: function(event){
      	  this.now = new Date().toLocaleString()
          this.tag = event.target.tagName
        }
    }
})