Vue.jsイベント

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.jsイベント

Vue.jsを使用すると、要素でv-onディレクティブを使用して、DOMイベントをインターセプトできます。このトピックは、コンポーネントをインタラクティブにするための鍵です