@clickとv-on：click Vuejsの違い

質問は十分に明確でなければなりません:)。しかし、私は誰かが使用することがわかります：

<button @click="function()">press</button>

誰かが使用する：

<button v-on:click="function()">press</button>

しかし、実際には2つ（存在する場合）の違いは何ですか

2つの間に違いはありません。1つは2つ目の省略形です。

v-プレフィックスは、テンプレートでVue固有の属性を識別するための視覚的な手掛かりとして機能します。これは、Vue.jsを使用して動的動作を既存のマークアップに適用する場合に便利ですが、頻繁に使用されるいくつかのディレクティブでは冗長に感じる場合があります。同時に、Vue.jsがすべてのテンプレートを管理するSPAを構築する場合、v-プレフィックスの必要性はそれほど重要ではなくなります。

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

出典：公式ドキュメント。

v-bindおよびv-onは、vuejs htmlテンプレートで頻繁に使用される2つのディレクティブです。そのため、次のように両方の略記を提供しました。

あなたは置き換えることができv-on:て@

v-on:click='someFunction'

なので：

@click='someFunction'

もう一つの例：

v-on:keyup='someKeyUpFunction'

なので：

@keyup='someKeyUpFunction'

同様にv-bind、:

v-bind:href='var1'

次のように書くことができます：

:href='var1'

それが役に立てば幸い！

それらは通常のHTMLとは少し違って見えるかもしれませんが、：と@は属性名の有効な文字であり、Vue.jsでサポートされているすべてのブラウザーはそれを正しく解析できます。さらに、それらは最終的にレンダリングされるマークアップには表示されません。省略構文は完全にオプションですが、後でその使用法についてさらに学ぶときに、おそらくそれを理解するでしょう。

出典：公式ドキュメント。