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)](https://qiita.com/Yorinton/items/f7eb54f05609750da7f5)