Vueイベント処理方法
多くの場合、Webのユーザーインターフェイスを開発するときは、 DOMイベントの動作をカスタマイズして、より豊かなユーザーエクスペリエンスを提供したいと考えています。 フォームの送信、ボタンのクリック、さらにはスクロールもすべて、コードでリッスンして処理できるDOMイベントに関連付けられています。 これらのイベントのデフォルトの動作を防止または変更するかどうかにかかわらず、目的の動作を実現するには、これらのイベントをリッスンして消費する必要があります。
Vue は、v-onディレクティブを提供します。これにより、HTML要素で DOMイベントをリッスンし、イベントの名前を指定してカスタマイズできます。 たとえば、v-on:clickを使用すると、clickDOMイベントを使用できます。 その他の可能性については、MozillaのDOMイベントの完全なリストを確認してください。
インラインイベント処理
v-onディレクティブを使用すると、buttonでclickイベントをリッスンし、クリック数を追跡する単純なカウンターをインクリメントできます。 v-onディレクティブにJavaScriptコードを提供することで、clickイベントがトリガーされるたびに、コンポーネントのコンテキストでを実行することができます。
InlineMethodComponent.vue
<template>
<div>
<h2>InlineMethodComponent</h2>
<button v-on:click="clicked += 1">
Clicked {{ clicked }} times
</button>
</div>
</template>
<script>
export default {
name: 'InlineMethodComponent',
data: function () {
return {
clicked: 0
}
}
}
</script>
コンポーネントメソッド
DOMイベントを処理できるようになったので、より複雑になるロジックの実装を開始したいと思います。 v-onディレクティブ内に一連の複雑なロジックを追加することは、非常に面倒で悪い習慣になります。 幸い、 Vue を使用すると、コンポーネントでイベント処理メソッドを定義できます。 コンポーネントのメソッドの名前をv-onディレクティブに渡すだけです。
SimpleMethodComponent.vue
<template>
<div>
<h2>SimpleMethodComponent</h2>
<button v-on:click="log">
Click Me
</button>
</div>
</template>
<script>
export default {
name: 'SimpleMethodComponent',
methods: {
log() {
console.log('Button clicked!');
}
}
}
</script>
インラインメソッド呼び出し
メソッド呼び出しに情報を渡したり、DOMイベント自体を消費したりしたい場合があります。 methodの名前をv-onディレクティブに渡す代わりに、 method 自体に呼び出しを渡して、必要な情報を渡すことができます。 DOMイベント自体を含む特別な変数$eventを使用することもできます。
InlineMethodCallComponent.vue
<template>
<div>
<h2>InlineMethodCallComponent</h2>
<button v-on:click="log('clicked!', $event)">
Click Me
</button>
</div>
</template>
<script>
export default {
name: 'InlineMethodCallComponent',
methods: {
log(msg, event) {
console.log(event.target.tagName, msg);
}
}
}
</script>
イベントメソッド修飾子
DOMイベントのデフォルトの動作を変更または防止したい場合があります。 Vue は、v-onディレクティブに提供するイベントの名前にチェーンできるいくつかの修飾子を提供します。
たとえば、タイプSubmitのbuttonを含むformがある場合、ユーザーがクリックするとページが更新されます。 シングルページアプリケーション（SPA）では、ページ全体のリロードを回避したいと考えています。 これを行うには、event.preventDefault()を呼び出して、イベントがページをリロードしないようにする.prevent修飾子をチェーンします。 .stop修飾子は、カスタムイベントハンドラーで呼び出す必要のあるevent.stopPropagation()を呼び出すことにより、DOMイベントのデフォルトの動作を完全に停止します。
MethodCallModifiersComponent.vue
<template>
<div>
<h2>MethodCallModifiersComponent</h2>
<form
v-on:submit.stop.prevent="log('clicked!', $event)">
<button type="Submit">
Click Me
</button>
</form>
</div>
</template>
<script>
export default {
name: 'MethodCallModifiersComponent',
methods: {
log(msg, event) {
console.log(event.target.tagName, msg);
}
}
}
</script>
イベントメソッドのキー修飾子
キーボードの押下によってトリガーされるDOMイベントがある場合があります。 Vue は、キーベースのイベント用に調整されたイベント修飾子を提供します。
たとえば、input要素がある場合、EnterとEscの両方のキー押下をリッスンできます。 この動作をカスタマイズすることで、Enterがlog()メソッドを呼び出し、Escapeがユーザーに入力をリセットするための迅速な方法を提供できるようになります。
MethodCallKeyModifiersComponent.vue
<template>
<div>
<h2>MethodCallKeyModifiersComponent</h2>
<input
placeholder="Press Enter"
v-on:keyup.esc.stop="clear"
v-on:keyup.enter.stop="log"
/>
</div>
</template>
<script>
export default {
name: 'MethodCallKeyModifiersComponent',
methods: {
log(event) {
console.log(
event.target.tagName,
event.type,
event.key,
event.target.value
);
},
clear(event) {
event.target.value = '';
}
}
}
</script>
まとめ
v-onディレクティブのおかげで、DOMイベントの動作を簡単に傍受してカスタマイズできます。 これらのイベントは個々のコンポーネントに関連付けられているため、イベントハンドラーにリッスンを停止するように指示する必要はありません。コンポーネントが破棄されると、イベントは破棄されます。 クリーンアップはありません！
