Vue.jsを使用すると、要素でv-onディレクティブを使用して、DOMイベントをインターセプトできます。このトピックは、コンポーネントをインタラクティブにするための鍵です
Vue.jsイベントとは
Vue.jsを使用すると、を使用してDOMイベントをインターセプトできます。v-on
要素のディレクティブ。
この要素でクリックイベントが発生したときに何かを実行したい場合:
<template>
<a>Click me!</a>
</template>
追加しますv-on
指令:
<template>
<a v-on:click="handleClick">Click me!</a>
</template>
Vueは、このための非常に便利な代替構文も提供します。
<template>
<a @click="handleClick">Click me!</a>
</template>
括弧を使用するかどうかを選択できます。@click="handleClick"
と同等です@click="handleClick()"
。
handleClick
コンポーネントにアタッチされたメソッドです。
<script>
export default {
methods: {
handleClick: function(event) {
console.log(event)
}
}
}
</script>
メソッドは私のでより詳細に説明されていますVueメソッドのチュートリアル。
ここで知っておく必要があるのは、イベントからパラメーターを渡すことができるということです。@click="handleClick(param)"
そしてそれらはメソッド内で受け取られます。
元のイベントオブジェクトにアクセスする
多くの場合、イベントオブジェクトに対してアクションを実行するか、イベントオブジェクト内のプロパティを検索する必要があります。どうすればアクセスできますか?
スペシャルを使用$event
指令:
<template>
<a @click="handleClick($event)">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function(event) {
console.log(event)
}
}
}
</script>
すでに変数を渡している場合:
<template>
<a @click="handleClick('something', $event)">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function(text, event) {
console.log(text)
console.log(event)
}
}
}
</script>
そこからあなたは呼び出すことができますevent.preventDefault()
、しかしより良い方法があります:イベント修飾子
イベント修飾子
メソッドでDOMの「もの」をいじる代わりに、Vueに次のように処理するように指示します。
@click.prevent
コールevent.preventDefault()
@click.stop
コールevent.stopPropagation()
@click.passive
を利用しますaddEventListenerのパッシブオプション@click.capture
イベントバブリングの代わりにイベントキャプチャを使用します@click.self
クリックイベントが子イベントからバブルされたのではなく、その要素で直接発生したことを確認してください@click.once
イベントは1回だけトリガーされます
これらのオプションはすべて、修飾子を次々に追加することで組み合わせることができます。
伝播、バブリング/キャプチャの詳細については、JavaScriptイベントガイド。
私の無料ダウンロードVueハンドブック
その他のvueチュートリアル:
- Vue.jsの概要
- Vue.js CLI:使用方法を学ぶ
- Vue.js DevTools
- Vue開発用のVSCodeの構成
- Vue.jsで最初のアプリを作成する
- Vue.js単一ファイルコンポーネント
- Vue.jsテンプレートと補間
- Vue.jsディレクティブ
- Vue.jsメソッド
- Vue.jsの計算されたプロパティ
- CSSを使用したVue.jsコンポーネントのスタイリング
- Vue.jsウォッチャー
- Vueメソッドvsウォッチャーvs計算されたプロパティ
- Vue.jsフィルター
- Vue.jsコンポーネント
- Vue.jsスロット
- Vue.jsコンポーネントの小道具
- Vue.jsイベント
- Vue.jsコンポーネントの通信
- Vue.jsステートマネージャー、Vuex
- Vue、別のコンポーネント内のコンポーネントを使用する
- Vue、クラス名として小道具を使用する方法
- Vue.js単一ファイルコンポーネントでSCSSを使用する方法
- Vue.jsでTailwindを使用する
- Vueルーター
- Vueコンポーネントを動的に表示する
- Vue.jsチートシート
- Vuexを使用してVueデータをlocalStorageに保存する
- Vueを使用してクラスを動的に適用する方法
- Vue、vモデルの使い方
- Vue、データが関数でなければならない理由
- Roadmap to become a Vue.js developer in 2020