【Vue.js】Vue.jsメモ(v-on:イベントハンドリング)
今回は「クリック」や「入力」といったイベントをハンドリングする v-on
ディレクティブについて。
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
基本用語
構文
イベントハンドリングには v-on
ディレクティブを使用する。
v-on:[イベント]=[イベントハンドラ] // v-on: を @ に省略することも可能 @[イベント]=[イベントハンドラ]
v-on:
に続けて検知するイベントを記載し、値に「イベントハンドラ」を指定する。
「イベントハンドラ」には「メソッドイベントハンドラ」 「インラインイベントハンドラ」の2種類ある。(後述)
以下は、ボタンをクリックする度にカウンタを増やす。
<div id="app"> <button v-on:click="clickHandler">クリック</button> <p>{{count}}回クリックしました!</p> </div>
var app = new Vue({ el: 'app', data: { count: 0 }, methods: { clickHandler: function() { this.count++ } } })
js側に記載してあるmethods
の中の clickHandler
が「イベントハンドラ」。
html側で v-on:click="clickHandler"
と書くことで、「クリックイベントをイベントハンドラclickHandler
とハンドルしている」ことになる。
メソッドイベントハンドラとインラインメソッドハンドラ
どちらも「イベントハンドラ」であるが、違いとしては「メソッドとして定義されているか、インライン処理として定義されているか」。
上記で登場した clickHandler
は「メソッドイベントハンドラ」になる。
clickHandler
と同一の処理を「インラインメソッドハンドラ」で書くと以下の通り。
<div id="app"> <button v-on:click="count++">クリック</button> <p>{{count}}回クリックしました!</p> </div>
var app = new Vue({ el: 'app', data: { count: 0 } })
v-on:click
の値には count++
という式を記載した。(値に指定して良いのは式であり、文ではない)
今回のように簡単な処理や、再利用しないような処理の場合はインラインで書くほうがいいかも。
利用可能なイベント
基本的にブラウザがサポートしているイベントなら何でもOK。
イベント修飾子
「イベント修飾子」はイベントに対するDOM操作の振る舞いを変更する修飾子。
v-on:[イベント].[イベント修飾子]=[ハンドラ]
の形式で書く。
<!-- .stop というイベント修飾子を使用 --> <button v-on:click.stop="handler">Click!!</button>
個人的に大事だなと思った修飾子だけ抜粋。
.stop
- イベントのバブリングを停止する。
- バブリング・・・要素のイベントが発火した際、上位階層(親など)の要素にも同じイベントが発火すること。
- この辺は「キャプチャーボード」とか絡んでくるので割愛。
prevent
- もとの処理をキャンセルする。
- 「もとの処理」とは、リンクの場合は「クリック時したらリンク先のページに遷移する」とか。