Vue.jsでイベントをマスターする：クリックからキーボード操作までの完全ガイド

Vue.jsでは、イベントハンドリングは主にv-onディレクティブ（または@シンボルを使ったショートカット）を使ってDOMイベントをリッスンします。これにより、ユーザーのアクション（クリック、入力、フォーム送信など）に対応するメソッドを呼び出すことができます。以下に基本的な使用方法をいくつか紹介します。

基本的なイベントリスナーの使用

Vue インスタンス内のメソッドを呼び出すために、v-onディレクティブを使用します。

<template>
  <button v-on:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
}
</script>

イベント修飾子

Vue.js はイベントをより細かく制御するために修飾子を提供します。例えば、イベント伝播を停止したり、デフォルトの動作を防ぐことができます。

• .stop – event.stopPropagation() を呼び出します。
• .prevent – event.preventDefault() を呼び出します。
• .capture – キャプチャモードでイベントリスナーを追加します。
• .self – イベントが要素自身で発生した場合にのみトリガーします。

例:

<template>
  <form v-on:submit.prevent="onSubmit">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      console.log('Form submitted!');
    }
  }
}
</script>

キー修飾子

キーボードイベントを扱う際、特定のキーでのみイベントが発火するようにするためのキー修飾子もあります。

• .enter
• .tab
• .delete (キャプチャは delete および backspace キーを含む)
• .esc
• .space
• .up
• .down
• .left
• .right

例:

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

これらの基本的な使い方をマスターすることで、Vue.jsでのリッチなユーザーインターフェースを効率的に構築できるようになります。