Vue.js を１から学んでみた〜修飾子〜

Vue.js を１から学んでみた。にて書いてきましたが、
長くなり編集しにくくなってきたので、分割しました（こんなやりかたしないのかな？知りたい。）

5-1.イベント修飾子

イベントハンドラ内でそのイベントを止めたり、バブリングを止めるために、
event.preventDefault()やevent.stopPropagation()をメソッドの最初にコールするが、
Vueには同等の機能をもった便利なイベント修飾子.stopや.preventがある。

v-onディレクティブの引数に設定するDOMイベントに追加する形式で書く。例：v-on:click.stop

「バブリング」については、DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017を参照

.stopや.preventだけでなく、以下が用意されている。

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

sample50.html

<!-- クリックイベントのバブリングが止まる -->
<a v-on:click.stop="doThis"></a>

<!-- submit イベントが実行されない -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾子は繋げることができる。バブリングを止める ＆ doThatは実行されない。 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 値を指定せず、修飾子だけ利用することも可能 -->
<form v-on:submit.prevent></form>

<!-- イベントリスナーを追加するときにキャプチャモードで使います -->
<!-- 言い換えれば、内部要素を対象とするイベントは、その要素によって処理される前にここで処理されます -->
<div v-on:click.capture="doThis">...</div>

<!-- event.target が要素自身のときだけ、ハンドラが呼び出されます -->
<!-- 言い換えると子要素のときは呼び出されません -->
<div v-on:click.self="doThat">...</div>

<!-- 最大1回、クリックイベントはトリガされます -->
<a v-on:click.once="doThis"></a>

<!-- `onScroll` が `event.preventDefault()` を含んでいたとしても -->
<!-- スクロールイベントのデフォルトの挙動(つまりスクロール)は -->
<!-- イベントの完了を待つことなくただちに発生するようになります -->
<div v-on:scroll.passive="onScroll">...</div>

使用時の注意事項１：実行される順番

以下の通り、イベント修飾子を設定する順番で、挙動が異なるので注意する。

修飾子を使用するとき、関連するコードが同じ順序で生成されるため注意してください。
それゆえ、v-on:click.prevent.self を使用すると全てのクリックイベントを防ぐことはできますが、v-on:click.self.prevent は要素自身におけるクリックイベントを防ぐだけです。

使用時の注意事項2：.passive と .prevent は同時使用不可

以下の通り、.preventが無視されることがあるので注意する。

.passive と .prevent を一緒に使わないでください。.prevent は無視され、ブラウザにはおそらく警告が表示されます。.passive はイベントのデフォルトの挙動を妨げないことをブラウザに伝達することを思い出してください。

5-2.キー修飾子

イベントハンドラ内で、キーボードに関するDOMイベントを扱う時に有効なのがキー修飾子。
特定のキーだけ反応するような処理を書ける。

イベント修飾子と同じく、v-onディレクティブに対して書く。例：v-on:keyup.enter="addChar($event)

Vueサポートキー

Vueがサポートしているのは、以下の最も一般的と思われるキー。

• .enter
• .tab
• .delete (“Delete” と “Backspace” キー両方をキャプチャします)
• .esc
• .space
• .up
• .down
• .left
• .right

sample60.html

<!-- Enterキーを押下した時だけ、addCharメソッドが実行される -->
<input type="text" v-on:keyup.enter="addChar($event)">

<!-- キー修飾子はつなげることも可能。Space/Enterキー押下時、addCharメソッドが実行される -->
<input type="text" v-on:keyup.enter.space="addChar($event)">

Key Code

keycodeも直接設定できる。

sample61.html

<!-- Enterキーを押下した時だけ、addCharメソッドが実行される -->
<!-- 両方とも、同じ-->
<input type="text" v-on:keyup.enter="addChar($event)">
<input type="text" v-on:keyup.13="addChar($event)">

ただし、keycodeイベントは非推奨。
新しいブラウザではサポートされない可能性もあるので注意が必要。

Key Values

Key Valuesに載っている任意のキー名をケバブケースに変換することで使用可能。

sample11.html

<!-- $event.key が 'PageDown' に等しい場合だけ呼ばれる -->
<input v-on:keyup.page-down="onPageDown">

5-3.システム修飾子キー

「Ctlキー + 4キー」押下した時など、ctl、alt等は他のキーと一緒に押下されるケースが多い。
このイベントをハンドリングしやすくしたのが、システム修飾キー。

Vueサポートキー

Vueは以下のキーをサポートしてくれる。

• .ctrl
• .alt
• .shift
• .meta（Mac：コマンドキー（⌘）　Windows：ウィンドウキー（⊞））

sample70.html

<!-- altキーを押しながらエンターキーを押下した時、addCharメソッドが実行される -->
<!-- エンターキーを押しながらaltキーを押下しても、何も反応しない-->
<input type="text" v-on:keyup.alt.enter="addChar($event)">

<!-- key codeでもOK -->
<!-- Alt + C -->
<input type="text" v-on:keyup.alt.67="addChar($event)">

<!-- マウス操作とももちろんOK -->
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

.exact 修飾子

.exactはシステム修飾子の正確な組み合わせを制御する。

sample71.html

<!-- これは Ctrl に加えて Alt や Shift キーが押されていても発行されます -->
<button v-on:click.ctrl="onClick">A</button>

<!-- これは Ctrl キーが押され、他のキーが押されてないときだけ発行されます -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- これは システム修飾子が押されてないときだけ発行されます -->
<button v-on:click.exact="onClick">A</button>

マウスボタンの修飾子

マウス操作の、左クリック、右クリック、真ん中クリックを以下の修飾子でサポートしてくれる

• .left
• .right
• .middle