Vue.js
修飾子
サーチ…
前書き
以下のようないくつかの使用頻度の高い操作があるevent.preventDefault()
またはevent.stopPropagation()
イベントハンドラ内は。メソッド内でこれを簡単に実行することはできますが、DOMイベントの詳細を処理するのではなく、データロジックに関するメソッドだけでよい場合は、より良い方法です。
イベント修飾子
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" >
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow