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!')
}
}
})
修飾子は大きく分けてイベント修飾子・キー修飾子・システム修飾子キーの3種類に分別される。
イベント修飾子
イベント修飾子は以下の6種類が存在する。
.once.stop.prevent.capture.self.passive
.stop
event.stopPropagation()と同じ。
.prevent
event.preventDefault()と同じ。
.capture
子要素のイベント時に親要素のイベントを先に実行できる。
.self
子要素から親要素のイベントが発生しなくなる。
.passive
スクロールイベントでpreventDefault()の影響を無視して動作を滑らかにする。
キー修飾子
キー修飾子は以下の9種類が存在する。
.deleteはWindowsだとBackspaceキーのことで.backspaceは存在しない。
.enter.tab.delete.esc.space.up.down.left.right
.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
.alt.enterだとShift + Alt + Enterも有効になるため、厳格にする場合は.exactを付ける。
マウスボタンの修飾子
マウスボタンの修飾子も.left, .right, .middleが存在する。
Macは.middle、スマートフォンは.rightを.middleが通常は使えない。
Windowsでもマウスが使用されることが現在は少ないので.middleは使用しないほうが良い。
.sync修飾子
プロパティ版 v-model
式で.sync修飾子をv-bindと一緒に使うと機能しなくなるので注意が必要。
<!-- 式で文字列を追加する書き方は無効 --> <my-shop :price.sync="price + '円'"></my-shop>
フォーム用の修飾子
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">
.trim
v-model.trimのようにv-modelに付けると前後の空白を自動的に取り除く。
例えば「 Hello world! 」は「Hello world!」になる。
<input type="text" v-model.trim="msg">
.lazy
v-model.lazyのようにv-modelに付けるとフォーカスをはずれたとき(blur時)にデータと入力を同期する。
<input type="text" v-model.lazy="msg">
