#35 Vue.jsアウトプット

キー修飾子

・キーボードに関するDOMイベントに対して使える修飾子。

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <input type="text" v-on:keyup.space.enter="myAlert">
</div>

//JavaScript//
new Vue({
  methods: {
    myAlert() {
      alert('アラート！');
    } 
  }
})

・HTMLファイルの3行目に<input type="text" v-on:keyup.space.enter="myAlert">と記述、JavaScriptファイルの3〜5行目に上記コードを記述する事で、テキスト内に「スペース」と「エンター」を入力した時に、"アラート！" を表示させる事が出来るようになる。

v-on:キーボードイベント.特定のキー = "ハンドラ"

・v-onにおけるキーボードイベントは、 "keyup（押し終わった時をハンドリング）" 以下に以下の記述も存在する。
keypress（タイプしたときをハンドリング）
keydown （押されたときをハンドリング）

・v-onにおけるキー修飾子は ".space（スペースキー）" や ".enter（エンターキー）" 以外に以下の記述も存在する。
.tab（タブキー使用時）
.delete（Delete と Backspace キーの両方使用時）
.esc（エスケープキー使用時）
.up（方向キー使用時）
.down（方向キー使用時）
.left（方向キー使用時）
.right（方向キー使用時）

最後まで読んで頂きありがとうございました！🙇‍♂️

■参考教材
Udemy「超Vue.js 2 完全パック」

■参考URL
https://fujiya228.com/vue-v-on-modifier/