Vue.js v2 イベントハンドラ一覧

公式だと全部書かれていなかったので、
メモとして残しておきます。

v-on

こいつを使えば各イベントに対応できるってことですね。
例えばクリックはv-on:click
省略系は@click

<div id="hoge">
  <button @click="huga">yes</button>
</div>

イベント種類

結構種類ありました。
Gitのソースもおっかけたのですが、見つけられてないのも全然ありそう(

記述発火タイミング備考
@blurフォーカス移動時
@change変更時inputで入力中に発火すると思ったら、フォーカスずらすまで発火されませんでした。
@clickクリック時
@dblclickダブルクリック時
@submitサブミット時
@keyupキーアップ時
@keydownキーダウン時
@mousedownマウスでクリックした時
@mouseupクリックしたマウスを上げた時
@mousemoveマウス動かしてる時
@mouseleaveマウスを離した時
@touchstart未検証Githubには書いてあった
@touchmove未検証Githubには書いてあった
@touchend未検証Githubには書いてあった

イベント修飾子

クリックイベントなどをさらに制御できるようになります。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once

例) .stop

クリックイベントの伝播を止める

<a @click.stop="doThis"></a>

例) .prevent

サブミット時にページのリロードさせない。

※@submitはformタグに記述しないと正しく動かない場合がありました

<form action="/hoge" @submit.prevent="onSubmit">
    <input type="submit" value="サブミット"/>
</form>

関数を指定しないのもできる

<form action="/hoge" @submit.prevent>
    <input type="submit" value="サブミット"/>
</form>

繋げることも可能

例えばテキストボックスでエンターを押した時にFormタグの中の勝手にボタンが押されて困る!って時に

<input type="text" name="hoge" v-model="hoge" @keydown.self.prevent.enter>

@keydown.self.prevent.enter を指定するとエンターで勝手にボタンが押されるのを防げたりします!

以下、公式引用

@click.prevent.self を使用すると全てのクリックイベントを防ぐことはできますが、
@click.self.prevent は要素自身におけるクリックイベントを防ぐだけです。

キー修飾子

keycodeが13の時だけsubmit関数が呼ばれる

<input @keyup.13="submit">

エイリアス

  • .enter
  • .tab
  • .delete (“Delete” と “Backspace” キー両方をキャプチャします)
  • .esc
  • .space
  • .up
  • .down
  • .left (2.2.0からマウスボタンにも対応したみたいです)
  • .right (2.2.0からマウスボタンにも対応したみたいです)
  • .middle (たぶんマウスのみ)
  • .ctrl
  • .alt
  • .shift
  • .meta (コマンドキー(⌘),Winの場合ウィンドウキー)

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

カスタムもできるみたいです。

// v-on:keyup.f1 を可能にします
Vue.config.keyCodes.f1 = 112

おしまい

殴り書きですが、今後新たな発見があれば更新します。

サーバサイドエンジニア。オムライスが好物

シェアする

  • このエントリーをはてなブックマークに追加

フォローする