【Vue基礎】v-onディレクティブを理解する

Vディレクティブとは

Vディレクティブとは、テンプレート（HTML）内で動的な仕組みを要素に与えるための属性です。v-で始まる属性により、Vueのテンプレート構文内で特別な動作を定義するために使われます。

【v-on】イベントリスナーをテンプレート内で設定する

v-onディレクティブは、イベントリスナーをHTML要素にバインドするための構文で、ユーザーの操作（クリック、キー入力、マウス移動など）に応じて、Vueのメソッドを実行することができます。

基本構文

<button v-on:click="countFuc">クリック</button>
// buttonがクリックされたときにcountFucメソッドを呼び出します
<button @click="countFuc">クリック</button>
// @ で省略

<template>
  <button @click="handleClick">クリック</button>
  <input @input="handleInput" @blur="handleBlur" />
</template>

<script setup>
function handleClick() {
  console.log('クリックされました');
}
function handleInput(event) {
  console.log('入力中：', event.target.value);
}
function handleBlur() {
  console.log('フォーカスが外れました');
}
</script>

よく使われるイベント名

■マウス操作岐

• click

  クリックされたとき

• dblclick

  ダブルクリックされたとき

• mousedown

  マウスボタンが押されたとき

• mouseup

  マウスボタンが離されたとき

• mouseenter

  要素にマウスが入ったとき

• mouseleave

  要素からマウスが出たとき

• mousemove

  マウスが動いたとき

■キーボード操作

• keydown

  キーが押されたとき

• keyup

  キーが離されたとき

■フォーム操作

• input

  入力されたとき

• change

  値が変わって確定したとき

• focus

  フォーカスされたとき

• blur

  フォーカスが外れたとき

• submit

  フォームが送信されたとき

■その他

• scroll

  スクロールされたとき

Vue3とVue2でのv-onコードの違い

v-v-onディレクティブは、Vue2と基本的に同じですが、Composition API（setup() ）にも対応していて、書きやすい構文になりました。また、ref()でリアクティブな変数を作ることより、効率よくコード記述ができると思います。

■Options API（従来スタイル）

<template>
  <div>
    <p>カウント: {{ count }}</p>
    <button @:click="increment">カウントアップ</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

■Composition API（setup()）

<template>
  <div>
    <p>カウント: {{ count }}</p>
    <button @click="increment">カウントアップ</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

【イベント修飾子】追加の条件指定

イベント修飾子は、v-onディレクティブに続けて追加の条件指定や振る舞いを変えるため、いわば「動作内容」を調整するオプションです。「イベントを監視する」役割はv-on、「動作内容」を調整する追加指定が修飾子という関係です。

基本構文

  <!-- イベントのデフォルト動作を防ぐ -->
  <a @click.prevent.stop = "submit">送信</a>

・@submit でsubmitイベント(値)を監視

・prevent でsubmitのデフォルト動作（ページ遷移）を防ぐ

・stop でイベントのバブリングを止める

よく使われるイベント修飾子

• .stop

  event.stopPropagation()＝バブリングを止める

• .prevent

  event.preventDefault()=ページ遷移などデフォルト動作を止める

• .self

  イベント発生元が自身の要素だけの場合に実行

• .once

  最初の一回だけ実行

まとめ

いかがでしたでしょうか。今回は、JavaScriptフレームワークVueのリアクティブv-onについてご紹介させていただきました。v-onは、ユーザーの操作（クリック・キー入力・マウス移動など）に応じて、Vueのメソッドを実行するディレクティブで、Vueのアプリ開発にはめちゃくちゃ利用するリアクティブですね。

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。