【Vue3】v-onとは?使い方を7パターン紹介する

v-onはhtml要素のイベントに関連するディレクティブ(vue独自の属性)です。

ボタンをクリックした時に、特定の処理を行いたい時などに使うことができます。

使い方

使い方を紹介します。全部で7パターンあります。Vue3で動きます。

1. 基本形

v-onの基本的な書き方です。

<button v-on:[イベント名]="[Javascript式]">ボタン</button>

実行したい[Javascript式]と[イベント名]を要素に書いていきます。

具体的にはこのように書きます。

<template>
  <div>
    <button v-on:click="counter += 1">+1</button>
    <p>count: {{ counter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  }
}
</script>

2. 省略したv-onの書き方

v-onは@に省略することができます。 v-on:clickを@clickと書くことで、少しですがタイプ数を減らすことができます。

<button v-on:click="counter += 1">+1</button>

👇

<button @click="counter += 1">+1</button>

二つのコードは同じ内容です。

3. メソッド

Javascript式だけでは、複雑な処理を行うのにコードの見栄えが悪くなってしまいます。そこで、v-onではmethodsを呼び出すこともできます。処理が複数行になる場合はこちらの方が便利です。

<button @click="countUp()">+1</button>

countUp()のメソッドを呼び出す部分はcountUpとかっこを省略しても大丈夫です。

<button @click="countUp">+1</button>

4. メソッド引数付き

メソッドに引数を渡せます。dataの値を動的に使いながらmethodsを呼び出す時などに便利です。

<button @click="countUp(1)">+1</button>

5. イベント修飾子

ディレクティブの動きを変更する修飾子という仕組みがあります。v-onにいくつか修飾子があります。 .preventのような形で表現します。

<form @submit.prevent="onSubmit"></form>

上の例は、event.preventDefault()を呼び出すので、ページがリロードされるのを防ぎます。

6. キー修飾子

「エンターが押されたとき」などの特定のキーボードイベントを捕捉することもできます。キー修飾子を使います。

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

7. イベントを渡す

$eventをmethodsの引数として渡すことで、methodsの中でDOMイベントにアクセスできます。

<button @click="countUp(1, $event)">+1</button>

コーディングのポイント

公式ドキュメントを読むと、 メソッドにはロジックのみを書いていくべき という設計思想のようです。そのためにイベント修飾子がある。

そうすることで、コードが読みやすくなって、ユニットテストもしやすくなるというメリットがあります。

【Vue3】v-onとは?使い方を7パターン紹介する