【Vue】実際の現場でよく使うイベントをまとめてみた

本記事のPoint

Vueでは、

@イベント名="メソッド名" 

等様々なイベントがあります。

ただし、イベントによっては実際の現場で使われないものもあります。

たとえば、

<template>
  <div id="app">
    <input type="text" v-bind:value="Name" v-on:input="changeName">
    {{Name}}
  </div>
</template>

のように、

v-model = v-bind + v-on

など、v-modelで書けるのであればそちらが使われます。

それを踏まえると、

この記事やること

• 現場でよく使われるイベントに厳選してまとめます

やらないこと

• 全部のイベントは紹介しません

よく使うイベントまとめ

書き方は全て

@イベント名="メソッド名" 

のように一緒です。

イベント名	内容
click	クリックされたときに実行されるイベント
submit	form等における送信ボタンが押されたときに発火するイベント
change	input等で表示が変更されたときに発火するイベント

おまけ

イベント修飾子と呼ばれるものもあります。

Vueに慣れたぐらいに見るとためになったりします。

記述	機能
.stop	イベントの連鎖を止める
.prevent	イベントの規定の動作をキャンセル
.capture	子要素のイベント実行時に親要素のイベントを先に実行
.self	子要素から親要素のイベントが発生しなくなる
.once	イベントを一回だけ実行
.passive	.preventの影響を無視

終わりに

この記事が

役に立った！応援してます！

などがあれば、ぜひスター★やシェアをお願いします！