v-onディレクティブでイベントの処理（メソッドや式）をバインドする [Vue.js]

本記事では、Vue.jsのv-onディレクティブについて紹介します。

1 v-onディレクティブ
2 v-onディレクティブの書式
3 v-onディレクティブの使用例
- 3.1 v-onディレクティブにメソッド名を指定する
- 3.2 v-onディレクティブに式を指定する
4 v-onディレクティブの修飾子
5 v-onディレクティブの省略記法
6 v-onディレクティブの実行確認用コード
- 6.1 v-onディレクティブにメソッド名を指定する
- 6.2 v-onディレクティブに式を指定する

v-onディレクティブ

ユーザーからの操作を受け付けるWebアプリケーションでは、フォーム（form）を作成してボタンやテキストボックス、チェックボックスなどのuserが操作できる要素を配置します。また、リンクやイメージなどを配置して、ユーザーにクリックなどの操作をしてもらうこともあります。

アプリケーションでは、ユーザーからの操作をDOMのイベントで処理します。
Vue.jsでは、DOMのイベントを購読するために、v-onディレクティブを使用します。

v-onディレクティブを通常の要素上で利用した場合は、ネイティブDOMイベントを購読します。
コンポーネント（カスタム要素）上で利用した場合は、子コンポーネントのカスタムイベントの発行を購読します。

v-onディレクティブの書式

v-onディレクティブには処理を行うためのメソッド名、または式を指定します。

v-on:イベント名="メソッド名または式"

1	v-on:イベント名="メソッド名または式"

「メソッド名」には、methodsオプションに定義したメソッド名を指定します。
「式」にはJavaScriptで使用できる式（処理）を指定します。

v-onディレクティブの使用例

ここでは、v-onディレクティブの使用例をいくつか示します。

v-onディレクティブにメソッド名を指定する

button要素のclickイベントにv-onディレクティブでメソッドをバインドする例を以下に示します。

JavaScript

Vue.createApp({
  methods: {
    onClick: function() {
      console.log('ボタンがクリックされました。');
    }
  }
}).mount('#app')

Vue.createApp({

methods: {

onClick: function() {

console.log('ボタンがクリックされました。');

}

}).mount('#app')

HTML

<div id="app">
  <button v-on:click="onClick">ボタン</button>
</div>

</div>

上記の例では、Vueインスタンスのmethodsオプションに定義したonClickメソッドを、v-onディレクティブでバインドしています。
ボタンがクリックされると、コンソールにメッセージが表示されます。

v-onディレクティブに式を指定する

button要素のclickイベントにv-onディレクティブで式を指定する例を以下に示します。

JavaScript

Vue.createApp({
  data: function() {
    return {
      num: 0
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

num: 0

}

}).mount('#app')

HTML

<div id="app">
  <div>
    <button v-on:click="num += 1">ボタン</button>
  </div>
  <div>
    {{num}}
  </div>
</div>

<div>

</div>

<div>

</div>

上記の例では、Vueインスタンスのdataオプションに定義した数値データのnumを1ずつ加算する式を指定しています。
ボタンがクリックされると、表示されていた数に1を足した値が表示されます。

v-onディレクティブの修飾子

v-onディレクティブには、v-modelディレクティブと同様に修飾子が用意されています。
v-onディレクティブで使用できる修飾子には次のものなどがあります。

stop
prevent
capture
self
once
passive

stop

.stop修飾子はJavaScriptのEvent.stopPropagationメソッドを呼び出します。

prevent

.prevent修飾子はJavaScriptのEvent.preventDefaultメソッドを呼び出します。

capture

.capture修飾子はキャプチャリングフェーズでイベントをキャッチします。

self

.self修飾子はevent.targetが要素自身の時（event.target === event.currentTargetの場合）だけイベントハンドラが呼び出されます。

once

.once修飾子は1回のみ実行される（1度だけしか実行されない）イベントになります。

passive

.passive修飾子はaddEventListenerのpassiveオプションにtrueを指定した場合と同様の動作をします。

参考

EventTarget.addEventListener()

v-onディレクティブの省略記法

本記事ではここまで、v-onディレクティブの記法として「v-on:イベント名=”メソッド名または式”」の形式で記述してきましたが、v-onディレクティブには省略記法が用意されています。
「v-on:イベント名=”メソッドまたは式”」の「v-on:」の部分は「@」に置き換えることができます。
ですので、「v-on:イベント名=”メソッド名または式”」は「@イベント名=”メソッド名または式”」と記述することができます。
例えば、「v-on:click=”onClickMethod”」であれば「@click=”onClickMethod”」となります。

v-onディレクティブの実行確認用コード

次のコードをHTMLファイル（拡張子が.htmlのファイル）に貼り付けて保存するか、jsFiddleのHTMLパネルに貼り付けて実行すると、コードの実行結果が確認できます。

v-onディレクティブにメソッド名を指定する

「v-onディレクティブの使用例」で示したv-onディレクティブにメソッド名を指定するコードになります。

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <button v-on:click="onClick">ボタン</button>
</div>

<script>
Vue.createApp({
  methods: {
    onClick: function() {
      console.log('ボタンがクリックされました。');
    }
  }
}).mount('#app')
</script>

</div>

Vue.createApp({

methods: {

onClick: function() {

console.log('ボタンがクリックされました。');

}

}).mount('#app')

</script>

v-onディレクティブに式を指定する

「v-onディレクティブの使用例」で示したv-onディレクティブに式を指定するコードになります。

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div>
    <button v-on:click="num += 1">ボタン</button>
  </div>
  <div>
    {{num}}
  </div>
</div>

<script>
Vue.createApp({
  data: function() {
    return {
      num: 0
    }
  }
}).mount('#app')
</script>