怠惰系エンジニアのメモ帳

勉強した内容をメモしていきます。解説ブログではないので悪しからず。

【Vue.js】Vue.jsメモ(v-on:イベントハンドリング)

今回は「クリック」や「入力」といったイベントをハンドリングする v-on ディレクティブについて。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

基本用語

構文

イベントハンドリングには 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
    • もとの処理をキャンセルする。
    • 「もとの処理」とは、リンクの場合は「クリック時したらリンク先のページに遷移する」とか。