Vue.jsでよく使われる用語まとめ③

Posted at 2024-11-28

Vue.jsで使用される基本用語について

イベントハンドリング

ボタンをクリックしたりマウスホバーやスクロールなど、ユーザーの操作をイベントといい、それに応じてメソッドを実行するしくみをイベントハンドリングという。

v-on(@)ディレクティブを使用して処理を設定する。

v-onについてはこちらから
Vue.jsでよく使われる用語まとめ➀

<button @イベント="処理">Click</button>

イベント一覧

イベント名	内容	使用例
`click`	要素がクリックされたときのイベント	`<button @click="handleClick">クリック</button>`
`mouseover`	要素（子要素含む）にマウスオーバーしたときのイベント	`<div @mouseover="handleMouseOver">マウスオーバー</div>`
`mouseout`	要素（子要素含む）からマウスが離れたときのイベント	`<div @mouseout="handleMouseOut">マウスアウト</div>`
`input`	要素に入力があったときのイベント	`<input @input="handleInput">`
`change`	フォーム要素の内容が変更されたときのイベント	`<input @change="handleChange">`
`submit`	フォームが送信されたときのイベント	`<form @submit="handleSubmit">`
`keydown`	キーが押されたときのイベント	`<input @keydown="handleKeydown">`
`keypress`	キーが押されている間に発生するイベント（主に文字入力に使用）	`<input @keypress="handleKeypress">`
`keyup`	キーが離れたときのイベント	`<input @keyup="handleKeyup">`
`focus`	要素にフォーカスしたときのイベント	`<input @focus="handleFocus">`
`blur`	要素からフォーカスを外したときのイベント	`<input @blur="handleBlur">`
`scroll`	要素がスクロールされたときのイベント	`<div @scroll="handleScroll">スクロール</div>`
`resize`	ウィンドウがリサイズされたときのイベント	`window.addEventListener('resize', handleResize)`
`drag`	ドラッグされたときのイベント	`<div @drag="handleDrag">ドラッグエリア</div>`
`drop`	ドラッグされた要素がドロップされたときのイベント	`<div @drop="handleDrop">ドロップエリア</div>`
`mouseenter`	マウスが要素に入ったときのイベント	`<div @mouseenter="handleMouseEnter">マウスエンタ</div>`
`mouseleave`	マウスが要素から出たときのイベント	`<div @mouseleave="handleMouseLeave">マウスリーブ</div>`
`wheel`	マウスホイールが回転したときのイベント	`<div @wheel="handleWheel">ホイール</div>`
`mousemove`	マウスが要素上で移動したときのイベント	`<div @mousemove="handleMouseMove">マウスムーブ</div>`
`contextmenu`	右クリックしたときのイベント	`<div @contextmenu="handleContextMenu">右クリック</div>`
`error`	エラーが発生したときのイベント	`<img @error="handleImageError" src="invalid.jpg">`
`dblclick`	要素がダブルクリックされたときのイベント	`<button @dblclick="handleDoubleClick">ダブルクリック</button>`
`reset`	フォームのリセットが行われたときのイベント	`<form @reset="handleReset">リセット</form>`

タッチイベント

イベント名	内容	使用例
`touchstart`	タッチされたときのイベント	`<div @touchstart="handleTouchStart">タッチ開始</div>`
`touchmove`	タッチされたまま動いているときのイベント	`<div @touchmove="handleTouchMove">タッチ移動</div>`
`touchend`	タッチをやめたときのイベント	`<div @touchend="handleTouchEnd">タッチ終了</div>`
`touchcancel`	タッチがキャンセルされたときのイベント	`<div @touchcancel="handleTouchCancel">タッチキャンセル</div>`

上記イベント使用例

・クリックイベント

<template>
  <button @click="handleClick">ここをクリック</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert("OK！");
    }
  }
};
</script>

・マウスオーバーイベント

<template>
  <div class="tooltip-container">
    <img
      src="https://via.placeholder.com/150"
      alt="サンプル画像"
      @mouseover="showTooltip"
      @mouseleave="hideTooltip"
    />
    <div v-if="isTooltipVisible" class="tooltip">
      これはサンプル画像です
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isTooltipVisible: false,
    };
  },
  methods: {
    showTooltip() {
      this.isTooltipVisible = true;
    },
    hideTooltip() {
      this.isTooltipVisible = false;
    },
  },
};
</script>

<style>
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
}
</style>

・スクロールイベント

<template>
  <div>
    <button v-if="displayButton" @click="scrollToTop">
      トップへ戻る
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayButton: false
    };
  },
  methods: {
    handleScroll() {
      this.displayButton = window.scrollY > 500; 
    },
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' }); 
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  }
};
</script>

・送信イベント

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="name" placeholder="名前" required />
    <button type="submit">送信</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
    };
  },
  methods: {
    handleSubmit() {
      alert(`この名前で送信： ${this.name}`);
    },
  },
};
</script>

イベント修飾子

イベントの制御を指定できる仕組み。
上記の送信イベントのように@イベント名.修飾子といった形で記述する。

修飾子	内容	使用例
`.prevent`	イベントのデフォルト動作を防ぐフォーム送信のリロードやリンク遷移を防ぐ（event.preventDefault()と同じ）	`@submit.prevent="onSubmit"`
`.stop`	イベントの伝播を停止親要素までイベントが発火しないようにする（event.stopPropagation()と同じ）	`@click.stop="onClick"`
`.self`	イベントが発生した要素自身にのみ反応	`@click.self="onClick"`
`.once`	イベントを1回だけ実行するその後そのボタンのクリックイベントは無効	`@click.once="onClick"`
`.capture`	親要素でイベントを最初に受け取り、その後に子要素で処理バブリングではなくキャプチャリング	`@click.capture="onClick"`
`.passive`	スクロールやタッチイベントのパフォーマンスを改善するデフォルト動作は防げない	`@scroll.passive="onScroll"`