はじめに
はじめまして、学生エンジニアの@huyunokiです。
キー修飾子とは
@keyupや@keydownなどのキーボードイベントを「Enterキーが押されたときだけ」のように特定のキーに限定したい場合に便利なのがキー修飾子です。
キー修飾子は、キーボードイベント（@keyup / @keydown）を特定のキーが押されたときに限定して実行するために使用します。
関連チートシート
構文
イベント名の後にドット（.）で繋げて記述します。複数の修飾子を組み合わせることも可能です。
<!-- 構文の形: @keyup.キー修飾子名="メソッド名" -->
<input @keyup.enter="submit" >
<!-- 組み合わせ例: Ctrl + Enterが押されたら実行 -->
<textarea @keydown.ctrl.enter="sendComment"></textarea>
キー修飾子一覧（チートシート）
| 修飾子 | 説明 | 構文例 |
|---|---|---|
.enter |
Enterキーが押されたときのみ実行 | @keyup.enter="submit" |
.tab |
Tabキーが押されたときのみ実行 | @keydown.tab="nextField" |
.delete |
DeleteキーまたはBackspaceキーが押されたときのみ実行 | @keyup.delete="clearText" |
.esc |
Escキーが押されたときのみ実行 | @keydown.esc="closeModal" |
.space |
Spaceキーが押されたときのみ実行 | @keyup.space="activate" |
.up |
上矢印キーが押されたときのみ実行 | @keydown.up="moveUp" |
.down |
下矢印キーが押されたときのみ実行 | @keydown.down="moveDown" |
.left |
左矢印キーが押されたときのみ実行 | @keydown.left="moveLeft" |
.right |
右矢印キーが押されたときのみ実行 | @keydown.right="moveRight" |
| システムキー | ||
.ctrl |
Ctrlキーが同時に押されたときのみ実行 | @keydown.ctrl.s="saveDraft" |
.shift |
Shiftキーが同時に押されたときのみ実行 | @keyup.shift.enter="newParagraph" |
.alt |
Altキーが同時に押されたときのみ実行 | @keydown.alt.c="openConfig" |
.meta |
Metaキー (Windows: Windowsキー, Mac: Commandキー) が同時に押されたときのみ実行 | @keydown.meta.delete="deleteItem" |
.exact |
修飾子が指定されていない場合は、他のシステムキーが押されていない場合のみ実行 | @click.exact="justClick" |
.keyAlias |
カスタムエイリアス（例: .f1など）が押されたときのみ実行 |
@keydown.f1="showHelp" |