Vue は DOM イベントのリスニングや、あるイベントを起点に処理を行うイベントハンドリングを v-onディレクティブで記述します。v-on は@に省略することもできます。

実際にマウス入力やキー入力といったイベント処理の事例をサンプル付きで解説します。

マウスイベント

マウスをクリックした時の@clickや要素にカーソルが重なった時@mouseoverの例を示します。

クリック

クリックする度にカウントアップするボタンの例です。
@clickでクリックイベントによる処理を記述します。

template

<template>
  <div>
    <button
      class="btn"
      @click="onClick"
    >
      Click Count : {{ clickCount }}
    </button>
  </div>
</template>

script

<script setup lang="ts">
import { ref } from 'vue';

const clickCount = ref(0);

const onClick = () => {
    clickCount.value += 1
}
</script>

style

<style scoped>
.btn {
    padding: 10px;
    border: 1px solid var(--vp-c-brand);
    border-radius: 5px;
}
</style>

カーソル

要素にカーソルが重なった時またはカーソルが重ならなくなった時のイベントを使って、クラススタイルを変更する例です。

template

<template>
  <div>
    <button
      class="btn"
      :class="{ mouseOver : isMouseOver}"
      @mouseover="onMouseOver"
      @mouseleave="onMouseLeave"
    >
      {{ isMouseOver ? 'Mouse Over' : 'Mouse Out' }}
    </button>
  </div>
</template>

script

<script setup lang="ts">
import { ref } from 'vue';

const mouseOverCount = ref(0);
const isMouseOver = ref(false);

const onMouseOver = () => {
  isMouseOver.value = true;
}

const onMouseLeave = () => {
  isMouseOver.value = false
}
</script>

style

<style scoped>
.btn {
    padding: 10px;
    border: 1px solid var(--vp-c-brand);
    border-radius: 5px;
}

.mouseOver {
  color: #fff;
  background: var(--vp-c-brand);
}
</style>

キーイベント

キー入力した値をイベントオブジェクト(event)を受け取り、アラート表示する例です。
メソッドの引数にイベントオブジェクトevent（名前は e などでも可です）を指定しています。

template

<template>
  <div>
    <input type="text" v-model="inputText" @keyup="onKeyUp"/>
  </div>
</template>

script

<script setup lang="ts">
import { ref } from 'vue';

const inputText = ref('');

const onKeyUp = (event) => {
  alert(`You touch ${event.key} key.`);
}
</script>

style

<style scoped>
input {
    padding: 10px;
    border: 1px solid var(--vp-c-brand);
    border-radius: 5px;
}
</style>

template 内のインラインハンドラーでイベントオブジェクトを使うことも出来ます。

インラインハンドラーでイベントオブジェクトを使う方法

フォームのサブミットイベント

入力フォームを使ってsubmitするときの例です。
フォーム送信時のページリロードを@submit.preventで防ぐことが出来ます。

template

<template>
  <div>
    <form id="submit-form" class="form" @submit.prevent="handleSubmit">
      <input class="input-field" type="text" v-model="inputValue" />
      <button class="submit-button" type="submit">Submit</button>
    </form>
  </div>
</template>

script

<script setup lang="ts">
import { ref } from 'vue';

const inputValue = ref('');

const handleSubmit = () => {
  alert(`You submit : ${inputValue.value}`)
}
</script>

style

<style scoped>
input {
    padding: 10px;
    border: 1px solid var(--vp-c-brand);
    border-radius: 5px;
}

.submit-button {
    margin: 10px;
    padding: 10px;
    border: 1px solid var(--vp-c-brand);
    border-radius: 5px;
}
</style>