v-on

v-on システム修飾子キーの使い方-Vue.js

Vue.js Article

Fujiya

• 2 min read

ここでは、v-onディレクティブの修飾子のうちシステム修飾子キーの使い方をサンプルコードを参考に解説していきます。

システム修飾子キーとは

システム修飾子キーは用いることで、同じイベントでも異なったイベントとして扱うことができるようになる修飾子です。基本の記述の仕方は以下の通りです。

Vue.js 
v-on:イベント.修飾子="ハンドラ"

例として以下のコードでは二つ目のボタンはCtrlボタンを押しながらでないと動作しません。

Vue.js 
<div id="app">
  <button v-on:click="call(1)">click 1</button>
  <button v-on:click.ctrl="call(2)">click 2</button>
</div>
<script>
  var app = new Vue({
    el: "#app",
    methods:{
      call(target){
        console.log(target + ' called')
      }
    }
  })
</script>

修飾子の種類

修飾子には以下の種類があります。

修飾子内容
shiftShiftキー
ctrl(control)Ctrlキー
altAltキー
metaMacintosh コマンドキー（⌘） windows ウィンドウキー（⊞）
left,right,middleマウスボタンの修飾子

exact

exactは修飾子のパターンを制限するのに用いられます。

上記のシステム修飾子キーなどを使うと同じ要素に対してイベントを重複して割り当てを行うことができます。

Vue.js 
<div id="app">
  <button 
    v-on:click="call(1)"
    v-on:click.ctrl="call(2)"
    >
      click
  </button>
  <button 
    v-on:click.exact="call(1)"
    v-on:click.ctrl="call(2)"
    >
      click
  </button>
</div>
<script>
  var app = new Vue({
    el: "#app",
    methods:{
      call(target){
        console.log(target + ' called')
      }
    }
  })
</script>

しかし、上記のコードの場合Ctrlボタンを押しながら一つ目のボタンをクリックするとどちらのメソッドも実行されてしまいます。これは、Ctrlボタンを押しながらでもclickイベントには違いないということで実行されてしまいます。

そこで二つ目のボタンではclickイベントにexactを付けており、このようにすることでclick以外何も押されていないときにのみ実行されるようにできます。

まとめ

今回はシステム修飾子キーの基本的な使い方について解説しました。組み合わせ方によって高度なイベントハンドリングが可能なのでぜひとも使いこなしたい機能です。 他の修飾子については別の記事で解説していきたいと思います。