【Vue.js】「@click.native.prevent」の意味がわからなかったから調べてみた。

Vue-Bootstrap-with-Material-Design を触ってて、「@click.native.prevent」
という構文が出てきたんで、分からなかったから調べてみた。

・・・ってかこれ、どんな順番で調べればいいんだ？
「@click」は、v-bind の省略記法だったな。確か。
が、「native」って何やねん。

公式サイト。
コンポーネントにネイティブイベントをバインディング

コンポーネントのルート要素にあるネイティブイベントを購読したい場合もあるかもしれません。こういった場合は .native 修飾子を v-on に付けてください。

コンポーネントにおける v-on を用いたネイティブイベントの購読 変更

コンポーネントを使用している時、 v-on は、そのコンポーネントに向けて発生したカスタムイベントのみを購読するようになりました。ルート要素上でネイティブの DOM イベントを購読したい時は、 .native 修飾子によって実現できます。以下がその例です:

さっぱり分からん・・・。
が、「ネイティブイベント」ってのが存在するみたいなんで、それが理解できればいいのか？

というわけで再び公式サイト。

・・・を調べてみると、ピンポイントで「ネイティブイベントとは何か？」を説明している項目はない模様。
英語版で「native event」を検索するも同様。

読んだ雰囲気で感じただけなんだけど、Vue.js の用語じゃなくて、JavaScript の用語っぽい？

一応、公式ページにこんなのあった。

イベント修飾子

// ...
methods: {
  warn: function (message, event) {
    // ネイティブイベントを参照しています
    if (event) event.preventDefault()
    alert(message)
  }
}

「ネイティブイベントを参照しています」というコメントがコード中に出てきているが、まず「ネイティブイベントが何なんか」を教えてくれよ。
内容から察するに、「Vue.js 固有のイベント（mounted とか computed とか）じゃなくて、JavaScriptにて定義されたイベント」って事？

ズバリ言っているわけではないが、そんな風に理解してみて、矛盾が出てきたら修正しよう。

続いて、「prevent」。
これもズバリ言っているページはなく、一番手がかりなりそうなのは、このページか？

修飾子

修飾子 (Modifier) は、ドットで表記された特別な接尾語で、ディレクティブが特別な方法で束縛されるべきということを示します。例えば、.prevent 修飾子は v-on ディレクティブに、イベントがトリガされた際 event.preventDefault() を呼ぶように伝えます:

何言ってるかさっぱりだ。

JavaScriptのリファレンスを見ればいいの？

Event​.prevent​Default()

Event インターフェースの preventDefault() メソッドは、イベントが明示的に処理されない場合に user agent に、そのデフォルトアクションを通常どおりに行うべきではないと伝えます。このイベントは通常、イベントリスナーの1つが stopPropagation() または stopImmediatePropagation() を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。

正直、よく分からん。

が、
Vue.js の「@click.native.prevent」は、
JavaScriptの「Event​.prevent​Default()」と同じ
という解釈でいいの？

まぁいいや。それで進めてみて、おかしな所が出てきたら、自分の解釈が間違っていたとして振り返ってみよう。

Vue.js よくわからーん！