[Vue.js]v-onディレクティブの使い方。methodsプロパティもあわせて解説

2021-02-28

Vue.jsのv-onディレクティブの使い方について解説します。

クリックやマウスホバーなどのイベント検知でよく使うものなので、具体例交えて紹介。

v-onディレクティブとは？

簡単に言うとイベント挙動時の処理を記述できます。

こういった具合です。

ボタンがクリックされるとカウントアップするコードを書いてみます。

<div id="app">
   <button v-on:click="counter += 1">+1 </button>
   {{ counter }}
</div>

new Vue({
  el: '#app',
  data: {
  counter: 0
}
})

ボタンをクリックすればカウントアップされ、表示されているcounterの値が1、2、3と増えていきます。

ただし、イベントが発火した時に複雑な処理を記述するのであれば、上記の方法だとコードが汚くなってしまいます。

イベント発火時にあるメソッドを実行したい、という時にmethodsプロパティを使います。

本来であればもっと複雑な処理を記述したいですが、サンプル用に同じ挙動のもの(+1ずつ増えていく)をmethodsプロパティを使って書いてみます。

<div id="app">
    <button v-on:click="count">+1 </button>
    {{ counter }}
</div>

new Vue({
  el: '#app',
  data: {
  counter: 0
},
methods: {
  count() {
  this.counter++;
  }
}
})

html側ではv-on:click=”関数名”で記述します。
js側では、methodsプロパティ内に関数を記述していきます。

ちなみに、関数名：function()でも動きます。

new Vue({
  el: '#app',
  data: {
  counter: 0
},
methods: {
  count:function() {
  this.counter++;
  }
}
})

Vue.jsのリファレンス見てみると、こっちで書かれていますね。

個人的には関数名：function()と書く方が好きかも。