イベントハンドラ [Vue.js]

イベントハンドラ

参考：

イベントハンドリング | Vue.js [公式]

v-on | Vue.js [公式]

イベント修飾子

• .stop：イベントを伝搬しない
• .prevent：ページを遷移させない
• .capture：キャプチャーフェイズでイベントを処理する
• .self：自身のイベントのみ処理する (子要素のイベントを無視する)
• .once：1回だけ処理する
• .passive：パッシブリスナーとして処理する

参考：

イベント修飾子 | Vue.js [公式]

onsubmit をコンポーネントで処理する

v-on:submit でメソッドを指定する。.prevent を指定してデフォルトの処理を行わない。

<form @submit.prevent="onSubmit">
  <input type="submit>
</form>

メソッドを実装する。

methods: {
  onSubmit: function () {
    // ...
  }
}

参考：

Vuejs form をサブミットするときのポイント – Qiita

Preventing onSubmit – Vue Forum

カスタムイベント

参考：

カスタムイベント | Vue.js [公式]

イベント名 | Vue.js [公式]

$on

参考：

vm.$on( event, callback ) | Vue.js [公式]

$emit

参考：

vm.$emit( eventName, […args] ) | Vue.js [公式]

v-on:scroll の使い方

参考：

Vue.js で10万件のリストを表示する – Qiita

.native

参考：

コンポーネントにネイティブイベントをバインディング | Vue.js [公式]

.sync

参考：

.sync 修飾子  | Vue.js [公式]

$listeners

参考：

コンポーネントにネイティブイベントをバインディング | Vue.js [公式]

vm.$listeners | Vue.js [公式]