開発ブログブログTOPへこのブログについて禁止/免責事項お問い合わせブログTOPへこのブログについて禁止/免責事項お問い合わせ[Vue.js]イベントハンドリングのおさらい[Vue.js]イベントハンドリングのおさらい2017-07-23ドキュメント環境v-onイベントの実行クリックしたボタンの詳細を表示する子コンポーネントから親コンポーネント$emitを飛ばす修飾子キー修飾子その他の修飾子おわりにVue.jsのイベント回りをちょっと細かめに触る機会がありました。ガイドを読んで学んだことをまとめます。7.0.xv-onイベントをバインドするにはv-onディレクティブです。]">v-onは@と省略することができます。次のコードは先のものと等価です。]">Vue.jsを触っているとやたらと@を目にします。慣れるまでv-onに脳内変換するのが大変です。イベントの実行v-on属性の値にJavaScript式を書くことができます。1">関数名を指定することも可能です。@click="countUp">関数に引数を与えることも可能です。@click="countUp(2)">上記の表現だけで、実にいろいろなことができます。この辺りが整理できると、無駄のない簡潔なコードを書くことができると思います。いった使い方もできるという例を示します。@close="$emit('close')">いやー、無駄がないですね。修飾子v-onには大変便利な修飾子がいくつも実装されています。例によってドキュメントから引用いたします。」と、ことあるごとに次のコードを書いてしまっていました。event.stopPropagation();4});5Vue.jsでは修飾子で処理できるので、意図が明確ですし、記法も簡潔ですねー。@click.stop.prevent>2キー修飾子Vue.jsではキーイベントで使いやすいエイリアスが用意されています。キー両方をキャプチャします)escspaceupdownleftright次より引用https://jp.vuejs.org/v2/guide/events.html#キー修飾子5年前はこんな関数を実装し、キーコードごとに処理分けをしていました。キーコードを調べなくてはなりませんし、直感的ではありません。続く13};14Vueでは、一部キーを修飾子でフォローしております。極端ですが、次のようにキーイベントを並べることもできます。@keydown.right="keyArrow(1)"8>9コードを覚えたり調べたりする必要がないというのは、大変素晴らしいです。上の例のようにやたらとキーイベントを並べたりすると、それだけイベントリスナが登録されてしまうのかどうか。そこは調べきれていないため、もしご存知の方は教えてくださると助かります。あると、これだけ知っていればとりあえず使えます。これに加えて便利な修飾子を知るともっと簡単な実装でイベントを実装できますよ、という内容でした。楽しい開発ライフをお過ごしください。ノイズキャンセリングヘッドフォンで集中力をマネジメントする2018-05-30疲労をマネジメントして集中力を高めよう2017-12-16[情熱プログラマ]「チームで一番の下手くそ」でいる勇気Amazonで詳細を見るAmazonで詳細を見るAmazonで詳細を見るCategoriesdevopsdevops/cocos2d-xdevops/hugodevops/laraveldevops/springframeworkdevops/vue.jsdevops/wordpresslovefanmeetlearnohterotherworklifeArchives201420152015/1st2015/2nd2015/3rd2015/4th20162016/1st2016/2nd2016/3rd2016/4th20172017/1st2017/2nd2017/3rd2017/4th20182018/1st2018/2nd2018/3rd2018/4th20192019/1st2019/2nd2019/3rd2019/4th20202020/1stTags#php#laravel#mac#wordpress#javascript#働き方#java#ネタ#ブログカスタマイズ#良いコード#vue.js#フロントエンド#linux#コマンド#プログラミング#人生の最適化戦略#cocos2d-x#アプリ開発#インフラ#androidアプリ開発#c++#simplicity#技術書#hugo#mysql#springframework#db#it業界#it用語集#ビジネス書#開発環境構築#androidアプリ#セキュリティ#テスト#静的サイトジェネレーター#jquery#json#web開発#レンタルサーバ#aws#css#git#maven#さくらインターネット#インターネットの仕組み#カタログ#ガジェット#ガチャ#サイバーセキュリティ#マイグレーション#開発環境#atom#bootstrap#github#iosアプリ開発#it勉強会#jmockit#markdownatuweb。