Vue.jsでイベントを処理する
Vue.jsを使用すると、ユーザーによってトリガーされたイベントを処理できます。 イベントの処理は、ユーザーの入力に応答することにより、Webアプリに対話性を追加するのに役立ちます。 Vueは、これらのイベントを処理するためのv-onディレクティブを提供します。
v-on
ユーザーがビューを操作すると、クリックやキーアップなどのDOMでイベントがトリガーされる可能性があります。 v-on ディレクティブを使用して、これらのイベントを処理できます。
簡単な例として、ユーザーがボタンをクリックするたびにインクリメントするカウンターを実装できます。 データモデルでカウンターをゼロに初期化することから始めましょう。
data() {
return {
count: 0
}
}
ビューでは、ボタンがクリックされたときに実行するメソッドを定義できます。
<label>Count is: {{count}}</label>
<button v-on:click="count++">Increment</button>
v-on は、clickイベントがトリガーされたときに指定された式またはメソッドをトリガーします。 button
エレメント。
この例では、 count
1つずつの値。
メソッドをv-onにバインドする
名前を使用してメソッドをイベントにバインドできます。
<input v-model="addValue">
<button v-on:click="addToCount">Add</button>
方法 addToCount
テンプレートで指定されたものは、モデルで次のように定義できます。
methods: {
addToCount: function() {
this.count = this.count + parseInt(this.addValue);
}
}
The addToCount
メソッドはからの入力を受け取ります addValue
それをカウントに追加します。
v-onの省略形
v-on:構文を使用してイベントを宣言する代わりに、@記号を使用できます。
<button @click="addToCount">Add</button>
イベント修飾子
イベントを処理するときに行われる頻繁に使用される呼び出しがあります。 Vueは、修飾子を使用してこれらを簡単に実装できるようにしました。
例えば、 event.preventDefault()
ブラウザのデフォルトの動作を防ぐためにイベントを処理するときによく呼び出されます。
これらをメソッドに書き出す代わりに、vue-onディレクティブで提供される修飾子を使用できます。
<a href="test" @click.prevent="addToCount">Add</a>
上記のコードサンプルは、デフォルトの動作を削除します a
タグを付けて、 addToCount
方法。 修飾子を追加しなかった場合、ページはで定義されたパスにリダイレクトしようとします。 href
属性。
Vueでは次の修飾子を使用できます。
- stop-イベントがDOMツリーをバブリングするのを防ぎます
- prevent-デフォルトの動作を防止します
- caption-キャプチャモードはイベント処理に使用されます
- self-イベントのターゲットがそれ自体である場合にのみトリガーします
- once-関数を最大1回実行します
キー修飾子
イベント修飾子と同様に、keyupなどのキー関連のイベントを処理するときに特定のキーをリッスンできるキー修飾子を追加できます。
<input v-on:keyup.13="addToCount" v-model="addValue">
上記の例では、 keyupイベントが13(エンターキー)のキーコードで発生した場合、 addToCount
メソッドが呼び出されます。
すべてのキーコードを覚えるのは難しいため、Vueには事前定義されたキーのセットが用意されています。 例としては、 enter 、 tab 、 delete 、 esc 、 space 、leftがあります。 。
また、次のようにキーコードの独自のエイリアスを設定することもできます。
Vue.config.keyCodes.a = 65