web-dev-qa-db-ja.com

@クリックとv-onとの違い：Vuejsをクリック

質問は十分に明確であるべきです:)。しかし、私は誰かが使用していることがわかります：

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

誰かが使う：

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

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

vue.jsvuejs-directive
86
LorenzoBerti

両者に違いはありません。1つは2つ目の略語です。

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

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

出典： 公式文書 。

102
Cobaltway

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'

それが役に立てば幸い！

38
Nitin Kumar

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

出典： 公式文書 。

1
dharma