了解しました！

ここでは 第4章：テンプレート構文の基礎 の中の「イベント処理（クリック・入力など）」について解説します。

Vue 2ではイベント処理に v-on（もしくは省略記法 @） を使って、

クリック、入力、マウス操作などのDOMイベントを簡単にハンドリングできます。

✅ 対象イベントとポイント

ここでは以下のイベントを扱います：

  1. クリックイベント（@click）
  2. 入力イベント（@input）
  3. イベント修飾子（@click.preventなど）

すべて Vue 2.7（TypeScript / <script setup> 構文）で書いています。

📄 ファイル名：EventExample.vue

<template>
  <!-- ボタンをクリックすると count が増える -->
  <button @click="increment">カウント: {{ count }}</button>

  <!-- テキスト入力に応じて name が更新される -->
  <input type="text" v-model="name" @input="logInput" placeholder="名前を入力" />
  <p>こんにちは、{{ name }}さん！</p>

  <!-- 修飾子付きイベント：送信ボタンを押してもページがリロードされない -->
  <form @submit.prevent="handleSubmit">
    <input v-model="email" type="email" placeholder="メールアドレス" />
    <button type="submit">送信</button>
  </form>
</template>

<script lang="ts" setup>
// ref を使ってリアクティブ変数を定義
import { ref } from 'vue';

// 数値型のカウント変数
const count = ref(0);

// 名前入力用の変数
const name = ref('');

// メールアドレス入力用の変数
const email = ref('');

// クリックイベント：ボタンを押すとカウントを増やす
const increment = () => {
  // count を1増やす
  count.value++;
};

// 入力イベント：入力内容をコンソールに出力
const logInput = (event: Event) => {
  // 入力イベントの値を取得してログ出力
  console.log('入力中:', (event.target as HTMLInputElement).value);
};

// フォーム送信イベント：送信時の処理
const handleSubmit = () => {
  // メールアドレスをコンソールに出力
  console.log('送信されたメール:', email.value);
};
</script>

🧩 一行ずつの解説

<template> 部分

<!-- ボタンをクリックすると count が増える -->
<button @click="increment">カウント: {{ count }}</button>