【Vue.js】キー修飾子

#はじめに
こんにちは！
今回は【Vue.js】キー修飾子についてアウトプットしていきます！

#キー修飾子とは
キーイベントをフックに、特定のキーボードのキーを指定することができそれが押された時のみ、記述したイベントハンドラを呼び起こすことができる。

#書き方・解説
今回はescキーが押されたらテキスト内の文字が空になるプログラムを記述していきます。

HTML

  <input type="text" v-on:keyup.27="clear" v-model="message">
　　　　　　　　　　　                      　　<!--⏫escのキー番号は27番なのでこのような感じで記述している-->

Vue.js

   data: {
     message: ''
   },
   methods: {
     clear: function() {
       this.message = ''
     }
   }

dataに空のmessageを用意し、clearメソッドでmessageの中身を空にする処理を記述する。
＜テンプレート側＞
テキストボックスを用意し、input　タグの中にv-on:keyup.27="clear"と記述する。処理内容はキー番号27番（esc）が押されたらclearメソッドの処理が実行されるというものである。それをmessageと双方向バインで双方向バインで紐付けているというふうになる。

また、キー番号ではわかりにくいのでescとキー名を記述してもOKです。

HTML

  <input type="text" v-on:keyup.esc="clear" v-model="message">

また、複数のキーを選択することも可能です。

HTML

  <input type="text" v-on:keyup.esc.space.up="clear" v-model="message">

これでesc,space,↑キーも押されると処理が実行されるようになりました。
※書き方は、.〇〇という風にかく。

#まとめ
・v-on:keyup.〇〇="メソッド名"という形で記述する。
・〇〇のところはキー番号でもキー名称どちらでも可。
・.〇〇.△△.□□という風に複数の指定も可。

#最後に
今回はキー修飾子についてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます！

最後までご愛読ありがとうございました！