【Vue.js】システム修飾子

はじめに

こんにちは！
今回は【Vue.js】システム修飾子についてアウトプットしていきます！

システム修飾子とは

システム修飾子キーは用いることで、同じイベントでも異なったイベントとして扱うことができるようになる修飾子です。
＜記述方＞
v-on:イベント.修飾子="イベントハンドラ名"

書き方・解説

今回はctrlキー＋cキーが押されたらテキスト入力欄の文字をクリアさせるプログラムを書いていきます。

HTML

  <input type="text" v-on:keyup.ctrl.67="clear" v-model="message">
                                 <!--⏫cキーのキー番号 -->

Vue.js

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

記述方法はキー修飾子の時と同じような感じですので解説は省略します。

また、表示されている文字をshift＋clickでイベントハンドラを実行させるのもやっておきます。

HTML

  <div v-on:click.shift="clickHandler ">
    Click you!
  </div>

Vue.js

     clickHandler: function() {
       alert('shift + click')
     }

上の記述はClick you!をshiftを押しながらクリックするとalert（shift + click）が鳴るプログラムです。実行すると、

をshiftを押しながらクリックすると、

このようにアラートがなります。

まとめ

・システム修飾子もキー修飾子のような記述法で実行されます。
・システム修飾子は意図的でしは発動されないものなので、異なったイベントを実行させたいときに使用するのが推奨されます。

最後に

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

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

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