【Vue.js】メソッドイベントハンドラ

#はじめに
こんにちは！
今回は【Vue.js】メソッドイベントハンドラについてアウトプットしていきます！

#メソッドイベントハンドラとは
イベントハンドラは、イベントが発生したときに実際に呼ばれるメソッドのことです。クリックなどの動作と、処理を行うメソッドを結び付ける仕組みがイベントハンドラなのです。

今回はv-on属性の値に、イベントハンドラのメソッド名を書く方法について解説していきます。

#書き方・解説

HTML

<div id="app">
  <p>
    {{ counter }}
  </p>
  <button v-on:click="clickHandler">
    Click!
  </button>
</div>

Vue.js

 var app = new Vue({
   el: "#app",
   data: {
     counter: 0
   },
   methods: {
     clickHandler: function() {
       this.counter++
     }
   }
 })

カウント数を保持するdataのプロパティcounterを記述。初期値は0。
イベントを発火させるmethodsオプションを用意し、今回メソッド名はclickHandlerと定義。
中身の処理をthis.counter++と記述。これによりクリックされた時にcounterがインクリメントされる処理がかかれました。

<テンプレート側>
カウント数の表示部分{{ counter }}とボタン部分Click!を用意。
ボタン部分にv-on:click="clickHandler"と記述します。
※="〇〇"の部分には呼び起こしたいメソッド名を記述しましょう。
※引数がない場合は()はなくてもOK!
※引数がある場合は() をつけ引数を取得し、console.logで出力するなどが可能になります。

Click!ボタンを押してみると、

このようにインクリメントされます。

#まとめ
このように基本的には、前回のインラインメソッドハンドラのような書き方はせず、methodsオプションを定義し、テンプレート側はスッキリさせるような、お互いを分けて記述した方が読みやすく、メンテナンス性もよくなるので、分けて記述しましょう！

#最後に
今回はメソッドイベントハンドラについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！