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

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

### イベントハンドリング

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

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

>v-onについてはこちらから
[Vue.jsでよく使われる用語まとめ➀](https://qiita.com/toriaezu_qiita/items/7a29c1b784f216906c07)

```vue
<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>` |

- 上記イベント使用例


  ・`クリックイベント`
```vuejs
<template>
  <button @click="handleClick">ここをクリック</button>
</template>

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

  ・`マウスオーバーイベント`
```vuejs
<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>
```

  ・`スクロールイベント`
```vuejs
<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>
```

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

### methods・computed・watchについて

#### `methods`
イベント処理や任意の関数を定義するために使用。
単純な関数の処理や特定の動作を定義するときに使う。
キャッシュはされないため毎回処理を実行する。

computedとの違いは特定の動作をトリガーに処理を計算されること。

#### `computed`
Vue.jsのリアクティブシステムと連動し、データを元に新しい値を動的に計算するために使用。
データが変更されない限りは再計算されず、再計算された際はキャッシュされる。

methodsとの違いは計算済みの値を動的に生成すること。（テンプレートに表示される値）

#### `watch`
特定のデータやプロパティを監視し、変更があった場合に対応する処理を実行するために使用。
非同期処理やAPI呼び出しのトリガー等に適している。

computedとの違いは、computedは新しい値を計算して返すのに対し、watchは監視対象の変更に応じて処理を実行する。

### 参考

・[【Vue.js 】イベントハンドリング（v-onディレクティブ）](https://qiita.com/smkhkc/items/73be65ee8e6e80e0f44e)

・[Vue の基本イベント全17実例！](https://blog.capilano-fw.com/?p=2787)

・[【Vue】使えるイベント一覧。v-onディレクティブで指定できる主要イベント（JavaScriptと同じ）](https://qiita.com/shizen-shin/items/17094a68a0369e126d41)

・[Vue.js イベント修飾子のまとめ](https://jun01t.hateblo.jp/entry/2024/08/14/141512)

・[【Vue.js】methods、computed、watchの概要と使い分けについて整理してみた！](https://nonakayasuo.com/methods-computed-watch/#:~:text=computed%E3%81%AF%E3%80%81%E5%8D%98%E7%B4%94%E3%81%AA%E8%A8%88%E7%AE%97,%E3%81%97%E3%81%9F%E3%81%84%E3%81%A8%E3%81%8D%E3%81%AB%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%80%82)