はじめに

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

インラインメソッドハンドラについて

v-onを使用することでDOMイベントの購読、イベント発火時のJavaScriptの実行が可能になる。

書き方・解説

クリック数をカウントする機能を例題にアウトプットしていきます。

HTML

<div id="app">
  <p>
    {{ counter }}
  </p>
  <button v-on:click="counter++">
    Click!　　　　　　　　　　　　　　　　<!--⏫インラインメソッドハンドラ-->
  </button>
</div>

Vue.js

 var app = new Vue({
   el: "#app",
   data: {
     counter: 0
   }
 })

カウント数を保持するdataのプロパティcounterを記述。初期値は0。
＜テンプレート側＞
カウント数の表示部分{{ counter }}とボタン部分Click!を用意します。
ボタンの属性にはv-on:clickを用意し、カウント数を管理するプロパティ（counter）をインクリメントする。

※インクリメント＝変数の値を１増やす演算のこと。

以上を記述し、Click!ボタンをクリックすると、

このように数字は１ずつ増えていく処理を実行し表示されるようになります。

まとめ

今回ように一行で（<button v-on:click="counter++">）イベントハンドラで記述することは稀で、v-on属性の値にJavascript式を記述していく方法には限界がある。
なので、次回の記事にはv-on属性の値にイベントハンドラのメソッド名を書く方法をアウトプットしていきます！

最後に

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

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

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