Vue.js 【イベントハンドリング】
Vue.js 【イベントハンドリング】
イベントの購読
See the Pen YzzVzNy by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
上記はClickイベントでcounterの値を+1していくプログラムです。
イベント発火時にJavaScriptが動いているのがわかります。
しかし、このようにベタベタとv-on属性の中に処理を書くと複雑になってきたときに管理が大変になってしまいます。
そのため、上記の動きを理解した上で、v-onにメソッドを渡すのが現実的な実装になります。
See the Pen MWWmWoP by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
これは、countupとcountdownをラッパーしたメソッドを呼んでいます。
@click:"countup();countdown()"と書くことで複数メソッドを呼び出す実装自体は可能なのですが、この書き方だと結局JavaScriptをべたべた書き込んでしまうことになるので、
多くのイベントハンドラのロジックはより複雑になっていくので、v-on 属性の値に JavaScript 式を記述し続けるのは現実的ではありません。
と公式にもあるように、１つのメソッドに処理を集約したほうが良いように思えました！
引数(パラメータ)について
See the Pen bGGWGva by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
メソッドの引数に(event)と記述していますが、これはデフォルトでイベントの内容が格納されています。
呼び出す側で@click="メソッド名(引数,$event)"と記述することで、明示的に引数を指定することが可能になります。
See the Pen jOOmORQ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
eventではなく、引数にeventを含めない普通のメソッドを呼ぶこともできます。
@Click以外にも様々なイベントを捕捉できます
ダブルクリック
See the Pen eYYWNJW by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
マウスオーバー、マウスアウト
See the Pen abbWOpq by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.
イベント修飾子
こちらがとても参考になりました！！
