Webアプリケーション上において（つまりDOM要素において）、ボタンをクリックしたり、マウスオーバー及びスクロールなどのユーザーによる一連の挙動を「イベント」と呼びます。そして、それら様々なイベントに対応して発動させる処理のことを（つまり関数）を「イベントハンドラ」と呼びます。
関連ページ
イベントハンドラー／イベントリスナーについて[addEventListener]
Vue.jsにおいて、イベントによってイベントハンドラを実行させるには、v-onディレクティブを利用します。おおよそ下記のようなコードを記述します。本記事ではこのv-onディレクティブに対する概要を説明します。
ボタンをクリックして関数を実行する
クリックによるイベントによって、文字（こんにちわ）を表示させます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <button v-on:click="showMessage">ボタン</button> <p>{{ msg }}</p> </div> <script> new Vue({ el: '#app', data: function () { return { msg: "" }; }, methods: { showMessage: function () { this.msg = 'こんにちわ' } } }); </script> </body> </html> |
12行目
v-onディレクティブにクリック（click）のイベントを指定し、showMessageという名前のイベントハンドラを設定しています。v-onは省略して下記のように記述することができます。
|
|
<button @click="showMessage">ボタン</button> |
※showMessageは正確には「メソッドイベントハンドラ」と呼ばれます。ここに直接式を記述する場合は「インラインメソッドハンドラ」と呼ばれます。
28〜30行目
methodsオプションにて、イベントハンドラであるshowMessageを定義しています。
下記コードでは、マウスオーバーおよびマウスアウトによるイベントによって、文字を変化させています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <div v-bind:style="styles" v-on:mouseover="overMessage" v-on:mouseout="outMessage"> </div> <p>{{ msg }}</p> </div> <script> new Vue({ el: '#app', data: function () { return { msg: "こんにちわ", styles: { backgroundColor: 'green', width: '200px', height: '200px' } }; }, methods: { overMessage: function () { this.msg = "マウスオーバー中です"; }, outMessage: function () { this.msg = "マウスアウトしました"; } } }); </script> </body> </html> |
他にも、スクロール（scroll）、キー操作（keyup、keydown、keypress）などによる様々なイベントが存在します。
イベント/システム修飾子について
「イベント修飾子」とは、v-onディレクティブのイベントに対する制御をより細かく指定することのできる機能の総称です。
またイベントと共にctrl、alt、shiftなどのキーボードキーを押下することによってイベントハンドラを実行することのできる「システム修飾子」があります。
下記コードでは、クリックによって数値をカウントする機能を実装していますが、各ボタンのクリックイベントにイベント修飾子およびシステム修飾子を付加することによって、意味の無い機能ですが異なる挙動を実現しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <button v-on:click="countNum">ボタン</button> <button v-on:click.once="countNum">1度だけボタン</button> <button v-on:click.right.prevent="countNum">右クリック</button> <button v-on:click.shift="countNum">shiftキー</button> <p>{{ num }}</p> </div> <script> new Vue({ el: '#app', data: function () { return { num: 0 }; }, methods: { countNum: function () { this.num += 1 } } }); </script> </body> </html> |
13行目
「.once」はイベント修飾子で、イベントハンドラを1度だけ実行します。ボタンを1度クリックするとカウントされますが、2度目は機能しなくなります。
14行目
「.right」はマウスの右クリックによってイベントハンドラが呼び出される修飾子ですが、イベント修飾子である「.prevent」によって右クリックによるポップアップメニューが表示されないようにしています。
もちろんイベント修飾子は、上記のようなクリック（click）だけではなく他のイベントに対しても機能します。
15行目
システム修飾子である「.shift」によって、shiftボタンを押下した状態でボタンをクリックするとイベントハンドラが実行されます。
他にもkyeupなどのキー操作におけるイベントに対してのキー修飾子などがあります（本記事では説明しません）。
本記事では、ボタンのクリック（click）イベントに対する一部の修飾子のみを説明しました。もっと様々なイベントに対して多くの修飾子が存在しますが、基本的にそれら修飾子は、「イベント修飾子」「システム修飾子」「キー修飾子」というグループ分けとなります。詳しくは参照ページをご覧ください。
参照ページ
イベントハンドリング
