Vue イベント

1. Vueのイベント処理 (v-on)

Vue における イベントハンドリング（Event Handling） は v-on ディレクティブを使用して行われます。これにより、たとえばボタンがクリックされたときに特定の処理を実行させることができます。

イベントハンドリングとは、特定の イベント（Event） が発生した際に特定のコードを実行するように HTML 要素を設定することです。
Vue のイベントは非常に使いやすく、作成するページを真に レスポンシブ（Responsive） なものにしてくれます。

• Vue メソッド（Methods）: イベント発生時に実行するように設定できる一連のコード。
• v-on 修飾子（Modifiers）: イベントに対する反応（リアクション）の詳細な挙動を指定できます。

2. イベント処理の基本：カウンターの実装

まずは、ボタンをクリックして「森にいるヘラジカ（Moose）を数える」というシンプルな例から始めてみましょう。

必要な要素は以下の通りです：

• <button> タグ
• click イベントをリッスンするための v-on 属性
• ヘラジカの数をインクリメント（加算）するコード
• ヘラジカの数を保持するための Vue インスタンス内の プロパティ（変数）
• 更新された数を表示するための二重中括弧 {{ }}

2.1 実装例：ヘラジカ・カウンター

ボタンをクリックするたびに count プロパティが増加し、表示が更新されます。

<div id="app">
  <img src="img_moose.jpg" alt="ヘラジカ">
  <p>{{ "ヘラジカの数: " + count }}</p>
  <button v-on:click="count++">ヘラジカを数える</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 0
      }
    }
  })
  app.mount('#app')
</script>

       注釈: Vue を導入する大きなメリットは、<p> タグ内の数値が 自動的に更新される 点にあります。バニラな JavaScript であれば、ユーザーの画面に表示されている数値を更新するために、もう一行追加のコードを記述して DOM を操作する必要があります。

3. 主要なイベント

コードを実行するためのトリガーとして使用できるイベントは数多く存在します。代表的なものは以下の通りです：

• click: クリック時
• mouseover: マウスホバー時
• mouseout: マウスが離れた時
• keydown: キーを押した時
• input: 入力値が変更された時

すべてのイベントリストを確認したい場合は、HTML DOM イベントの公式ドキュメント等を参照してください。

4. v-on ディレクティブの役割

v-on ディレクティブを使用することで、ユーザーの操作に反応するページを作成できます。
Vue の v-on は、ブラウザに対して「どのイベントを監視（リッスン）し、そのイベントが発生したときに何をすべきか」を伝える役割を担います。

5. メソッド (Methods)

イベント発生時により複雑なコードを実行したい場合は、そのロジックを Vue メソッド 内に記述し、HTML 属性からそのメソッドを参照します。

5.1 メソッドの呼び出し例

<p v-on:click="changeColor">ここをクリック</p>

ロジックを HTML 内に直接書くのではなく、メソッドとして切り分けることで、コードの可読性と再利用性が大幅に向上します。

6. イベント修飾子 (Event Modifiers)

v-on や Vue メソッドに加えて、イベント修飾子（Event Modifiers） と呼ばれる機能を利用できます。これを使うと、イベントの挙動を細かくカスタマイズすることが可能です。

たとえば：

• ページ読み込み後に一度だけイベントを発生させる (.once)
• submit イベント時にフォームの再読み込みを防止する (.prevent)

これらについては、後続のセクションで詳しく掘り下げていきます。