Vue.jsを使用しているなら必ず覚えるべき24の修飾子(サンプル付き)

Vue.jsの修飾子とは

@clickなどのイベントに付くドット(.)でつなげた修飾子。

例えばクリックイベントを1回だけ有効にしたい場合は、修飾子を使用しない場合は以下のようになるが。

// <button @click="onClick">click!</button>
new Vue({
  el: '#app',
  data: {
    isClick: false
  },
  methods: {
    onClick() {
      if (!this.isClick) {
        alert('Hello world!')
        this.isClick = true
      }
    }
  }
})

Vue.jsの修飾子を使用する場合は@clickに.onceを使用するだけで実装できる。

// <button @click.once="onClick">click!</button>
new Vue({
  el: '#app',
  methods: {
    onClick() {
      alert('Hello world!')
    }
  }
})

Vue.js 修飾子 .once

修飾子は大きく分けてイベント修飾子・キー修飾子・システム修飾子キーの3種類に分別される。

イベント修飾子

イベント修飾子は以下の6種類が存在する。

• .once
• .stop
• .prevent
• .capture
• .self
• .passive

.stop

event.stopPropagation()と同じ。

Vue.js 修飾子 .stop

.prevent

event.preventDefault()と同じ。

Vue.js 修飾子 .prevent

.capture

子要素のイベント時に親要素のイベントを先に実行できる。

Vue.js 修飾子 .capture

.self

子要素から親要素のイベントが発生しなくなる。

Vue.js 修飾子 .self

.passive

スクロールイベントでpreventDefault()の影響を無視して動作を滑らかにする。

Vue.js 修飾子 .passive

キー修飾子

キー修飾子は以下の9種類が存在する。

.deleteはWindowsだとBackspaceキーのことで.backspaceは存在しない。

• .enter
• .tab
• .delete
• .esc
• .space
• .up
• .down
• .left
• .right

.enter

Vue.js 修飾子 .enter

.up.down.left.rightのようにつなげることもできる。

Vue.js 修飾子 .up.down.left.right

aキーを押したときは@keyup.a

<input @keyup.a="onKeyA">

システム修飾子キー

システム修飾子キーは以下の4種類が存在する。

.metaはMacだとcommandキー(⌘)、WindowsだとWindowキー(⊞)。

.metaなどはinputタグなどでは使用できない。

Alt + aなどキーの組み合わせによってはイベントが実行されないことがあるので注意。

• .ctrl
• .alt
• .shift
• .meta

Vue.js 修飾子 .alt

.alt.enterだとShift + Alt + Enterも有効になるため、厳格にする場合は.exactを付ける。

Vue.js 修飾子 .exact

マウスボタンの修飾子

マウスボタンの修飾子も.left, .right, .middleが存在する。

Macは.middle、スマートフォンは.rightを.middleが通常は使えない。

Windowsでもマウスが使用されることが現在は少ないので.middleは使用しないほうが良い。

Vue.js マウスボタンの修飾子

.sync修飾子

プロパティ版 v-model

式で.sync修飾子をv-bindと一緒に使うと機能しなくなるので注意が必要。

<!-- 式で文字列を追加する書き方は無効 -->
<my-shop :price.sync="price + '円'"></my-shop>

Vue.js .sync修飾子

フォーム用の修飾子

Vue.jsには.number, .trim, .lazyというフォーム用の修飾子が3つ用意されている。

.number

v-model.numberのようにv-modelに付けると数値を返すようになる。

inputタグはtype="number"でもstring型で返すが、v-model.numberだとnumber型で返すのでtype="number"のときは必ず付けたほうが良い。

<input type="number" v-model.number="price">

Vue.js .number修飾子

.trim

v-model.trimのようにv-modelに付けると前後の空白を自動的に取り除く。

例えば「 Hello world! 」は「Hello world!」になる。

<input type="text" v-model.trim="msg">

Vue.js .trim修飾子

.lazy

v-model.lazyのようにv-modelに付けるとフォーカスをはずれたとき(blur時)にデータと入力を同期する。

<input type="text" v-model.lazy="msg">

Vue.js .lazy修飾子