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つずつの値。

名前を使用してメソッドをイベントにバインドできます。

<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：構文を使用してイベントを宣言する代わりに、@記号を使用できます。

<button @click="addToCount">Add</button>

イベントを処理するときに行われる頻繁に使用される呼び出しがあります。 Vueは、修飾子を使用してこれらを簡単に実装できるようにしました。

例えば、 event.preventDefault() ブラウザのデフォルトの動作を防ぐためにイベントを処理するときによく呼び出されます。

これらをメソッドに書き出す代わりに、vue-onディレクティブで提供される修飾子を使用できます。

<a href="test" @click.prevent="addToCount">Add</a>

上記のコードサンプルは、デフォルトの動作を削除します a タグを付けて、 addToCount 方法。修飾子を追加しなかった場合、ページはで定義されたパスにリダイレクトしようとします。 href 属性。

Vueでは次の修飾子を使用できます。

イベント修飾子と同様に、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