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 は、button
要素でclickイベントがトリガーされたときに指定された式またはメソッドをトリガーします。
この例では、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); } }
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