【Vue3 / Composition API】hoverしたときに要素を出現させる方法

はじめに

"Vue.js hover"で検索して一番上に出てきた記事がVue2 & Option APIで書かれたものでしたので、Vue3 & Composition APIで書き換えてみました。

完成品

以下のVue SFC Playgroundでコードと動作を確認できます。

要点

• @はv-onの省略形です
• マウスポインタが要素に乗った時mouseoverイベントが発火します
• マウスポインタが要素から外れた時にmouseoutイベントが発火します

<script setup>
import { ref } from 'vue'

const message = ref('hoverしてください')
const isHovered  = ref(false)

const mouseOverAction = () => {
  isHovered.value = true
}

const mouseOutAction = () => {
  isHovered.value = false
}
</script>

<!-- CSSは省略しています -->
<template>
  <div>
    <div @mouseover="mouseOverAction" @mouseout="mouseOutAction">
      <p>{{ message }}</p>
      <div v-if="isHovered">hoverされました</div>
    </div>
  </div>
</template>

補足：マウスポインタのイベント

v-onディレクティブに指定できるマウスポインタのイベントは他にもあります。
これらはVueではなくJavaScriptのイベントですので、詳細は"JavaScript mouseenter"などで検索して調べてください。

イベント名	発生タイミング
mouseenter	マウスポインタが要素に入ったとき（自要素のみ ）
mouseleave	マウスポインタが要素を出たとき（自要素のみ ）
mouseover	マウスポインタが要素に入ったとき（子要素も含む ）
mouseout	マウスポインタが要素を出たとき（子要素も含む ）

※ 山田祥寛『Vue 3 フロントエンド開発の教科書』（技術評論社、2023年、初版）P72より引用

終わりに

Option APIとComposition APIだけではなく、mouseenterとmouseoverの違いについても知ることができ、いい機会でした。