Perbedaan antara @klik dan v-on: klik Vuejs

160

pertanyaan-pertanyaan harus cukup jelas :). Tetapi saya dapat melihat bahwa seseorang menggunakan:

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

Seseorang gunakan:

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

Tapi sungguh apa perbedaan antara keduanya (jika ada)

vue.js vuejs-directive LorenzoBerti
sumber

Jawaban:

189

Tidak ada perbedaan antara keduanya, yang satu hanya singkatan untuk yang kedua.

Awalan v- berfungsi sebagai isyarat visual untuk mengidentifikasi atribut spesifik Vue di templat Anda. Ini berguna ketika Anda menggunakan Vue.js untuk menerapkan perilaku dinamis pada beberapa markup yang ada, tetapi dapat terasa tepat untuk beberapa arahan yang sering digunakan. Pada saat yang sama, kebutuhan untuk awalan v- menjadi kurang penting ketika Anda membangun SPA di mana Vue.js mengelola setiap templat.

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

Sumber: dokumentasi resmi .

Cobaltway
sumber
1
Apakah ada preferensi komunitas Vue terhadap @ atau hanya preferensi JetBrains untuk mengeluh tentang penggunaan v-on?
Kimmo Hintikka
5
@ KimmoHintikka Ya, entah bagaimana ada preferensi terhadap pintasan (@). Aturan ini termasuk dalam strongly-recommendeddan recommendeddari preset eslint-plugin-vue. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…
Cobaltway
63

v-binddan v-ondua arahan yang sering digunakan dalam template hue vuejs. Jadi mereka memberikan notasi steno untuk mereka berdua sebagai berikut:

Anda bisa menggantinya v-on:dengan@

v-on:click='someFunction'

sebagai:

@click='someFunction'

Contoh lain:

v-on:keyup='someKeyUpFunction'

sebagai:

@keyup='someKeyUpFunction'

Begitu pula v-binddengan:

v-bind:href='var1'

Dapat ditulis sebagai:

:href='var1'

Semoga ini bisa membantu!

Nitin Kumar
sumber
@LorenzoBerti bagaimana dengan jawaban ini. Apakah itu membantu Anda lebih memahami?
Nitin Kumar
Jawabannya tidak menjelaskan apa-apa, hanya memberi contoh 1/3 yang tidak sesuai dengan pertanyaan yang diajukan. Maaf.
Jakub Strebeyko
v-bind dan v-on adalah dua arahan yang sering digunakan dalam template hue vuejs. Jadi mereka memberikan notasi steno untuk mereka berdua. Saya pikir ini menjelaskan pertanyaan. itulah alasan yang disediakan dalam dokumentasi isyarat juga :-)
Nitin Kumar
Masalahnya adalah jawabannya telah diposting 4 bulan kemudian tanpa tautan, tanpa kutipan, dan melempar pada tanda titik dua untuk v-bind, yang sebenarnya dapat menambah kebingungan.
Jakub Strebeyko
2

Mereka mungkin terlihat sedikit berbeda dari HTML normal, tetapi: dan @ adalah karakter yang valid untuk nama atribut dan semua browser yang didukung Vue.js dapat menguraikannya dengan benar. Selain itu, mereka tidak muncul di markup yang diberikan akhir. Sintaks singkatan benar-benar opsional, tetapi Anda mungkin akan menghargai ketika Anda mempelajari lebih lanjut tentang penggunaannya nanti.

Sumber: dokumentasi resmi .

Dharma
sumber