Vue.js v-on:clickでonceとpreventを使う。

はじめに

Vue.jsでv-onディレクティブで遊んでみた。
使い方のイメージをしながらコードを書く。

今回使ったイベント修飾子

• .once
• .prevent

.once

１回だけハンドラを呼び出す。その後は反応しなくなる

.prevent

意図しない画面遷移、画面更新を避けるために使う。

See the Pen
Vue.js v-on:click2 by morioka (@rm5912)
on CodePen.

左のボタンはずっと反転しますが、右のボタンは一度反転すると反応しなくなります。
下のリンクは左も右もGoole.comにリンクを貼っていますが、
右は押しても機能しません。左はCodepenから飛べないのでエラーになりますが。。。。

最後に

v-on:clickは省略して@clickでも、アプリケーションの中では揃えましょう。

<button @click="reverseMessage">メッセージ反転</button>
<button @click.once="reverseMessage">一度だけ反転</button>

参考サイト
[メモ]Vue.jsイベント修飾子一覧(Qiita)