こんにちは、ミナトです。
「Vue.jsでイベント発火時に処理を行いたい」
このような時は、Vue.jsではv-onディレクティブを利用することで、イベントに対する処理を実行できます。
今回はVue.jsのイベントハンドリングについて解説します。
目次
Vue.jsのイベントハンドリング
v-on ディレクティブを使うことで、DOM イベントのサブスクライブ、イベント発火時の JavaScript の実行が可能になります。
メソッドイベントハンドラ
以下の例では、VueインスタンスにmethodsプロパティclickHandlerを定義しています。clickHandlerが呼ばれた時、dataプロパティのcounterの値を+1して、コンソールにイベントを出力しています。
v-on:clickにclickHandlerを指定しています。こうすることで、ボタンクリック時にclickHandlerが実行されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="app">
<button v-on:click="clickHandler">Add 1</button>
<p>counter: {{ counter }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
clickHandler: function (event) {
this.counter += 1
console.log(event)
}
}
})インラインメソッドハンドラ
メソッド名を直接指定する代わりに、インライン JavaScript 式でメソッドを指定することもできます。
イベントハンドラに引数を渡したい場合などに利用します。
以下の例では、ボタンクリック時に、引数に渡した値をアラートに表示しています。
<div id="app">
<button v-on:click="clickHandler('Hello!')">Click!</button>
</div>new Vue({
el: '#app',
methods: {
clickHandler: function (message) {
alert(message)
}
}
})$eventを利用する
インラインメソッドハンドラで引数を指定している場合、このままではイベントを取得できなくなってしまいます。
イベントを取得するためには、明示的に$eventを指定します。
また、イベントハンドラー側でもイベントを受け取れるようにしておきます。
以下の例では、受け取ったイベントをコンソールに表示しています。
<div id="app">
<button v-on:click="clickHandler('Hello!', $event)">Click!</button>
</div>new Vue({
el: '#app',
data: {
counter: 0,
},
methods: {
clickHandler: function (message, event) {
alert(message)
console.log(event)
}
}
})イベント修飾子
イベント修飾子は、クリックなどのイベントの振る舞いを変更するものです。
イベント修飾子には以下のような種類があります。
- .stop・・・イベントの伝搬を止める
- .prevent・・・インベントのデフォルトの動作をキャンセル
- .capture・・・イベントハンドラをキャプチャモードで実行
- .self・・・event.target が要素自身のときだけ、ハンドラが呼び出される
- .once・・・一度だけ実行する
- .passive・・・passiveモードを有効化
以下の例では、.onceを用いて2回目以降イベントが発火しないことを確認します。v-on:click.onceとしている場合は、最初の一回のみ値が書き変わります。.onceを外すと、クリックのたびに値が変わることを確認できます。
<div id="app">
<p>{{ message }}</p>
<button v-on:click.once="clickHandler">Click!</button>
</div>new Vue({
el: '#app',
data: {
message: '',
},
methods: {
clickHandler: function (message, event) {
this.message = new Date().toLocaleTimeString()
}
}
})キー修飾子
キーボードイベントを扱うには、キー修飾子を利用します。
キー修飾子を利用すると、特定のキーが押された場合のみイベントハンドラを呼び出すことができます。
以下の例では、キーボードの「esc」キーを押した際にテキストフィールドの値をクリアしています。
<div id="app">
<p>{{ message }}</p>
<input type="text" v-on:keyup.esc="clear" v-model="message">
</div>new Vue({
el: '#app',
data: {
message: '',
},
methods: {
clear: function () {
this.message = ''
}
}
})システム修飾子
システム修飾子を利用すると対応するキーが押されたときにのみマウスもしくはキーボードのイベントリスナをトリガできます。
- .ctrl・・・ctrlキーが押されている時
- .alt・・・altが押されている時
- .shift・・・shiftキーが押されている時
- .meta・・・macの場合commandキー、windowの場合Windowsキーが押されている時
以下の例では、「ctrl + c」が押された場合に、テキストをクリアしています。
<div id="app">
<p>{{ message }}</p>
<input type="text" v-on:keyup.ctrl.67="clear" v-model="message">
</div>new Vue({
el: '#app',
data: {
message: '',
},
methods: {
clear: function () {
this.message = ''
}
}
})
