Vue.js
修飾子

前書き

イベント修飾子

Vueは、ドットで指示された指示文を呼び出すことによって、 v-onイベント修飾子を提供します。

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

たとえば：

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- use capture mode when adding the event listener -->
<div v-on:click.capture="doThis">...</div>

<!-- only trigger handler if event.target is the element itself -->
<!-- i.e. not from a child element -->
<div v-on:click.self="doThat">...</div>

キー変更子

キーボードイベントを聞いているときは、共通のキーコードを確認する必要があることがよくあります。すべてのkeyCodeを思い出すことは面倒です。そのため、Vueは最も一般的に使用されるキーのエイリアスを提供します。

• .enter
• .tab
• .delete （ "Delete"と "Backspace"キーの両方をキャプチャ）
• .esc
• .space
• .up
• .down
• .left
• .right

たとえば：

<input v-on:keyup.enter="submit">

入力修飾子

• .trim

ユーザーの入力を自動的にトリミングする場合は、 trim修飾子をv-model管理入力に追加することができます。

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

• .number

ユーザー入力が自動的に数値として型変換されるようにするには、次のようにします。

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

• .lazy

一般に、 v-modelは各入力イベントの後に入力とデータを同期させますが、変更イベントの後にlazy修飾子を追加することができます。

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