@Click ve v-on arasındaki fark: click Vuejs

160

sorular yeterince açık olmalı :). Ama birisinin kullandığını görebiliyorum:

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

Birisi şunları kullanır:

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

Ama gerçekten ikisi arasındaki fark nedir (eğer varsa)

vue.js vuejs-directive

— LorenzoBerti
kaynak

189

İkisi arasında fark yoktur, biri ikincisi için bir kısayoldur.

V- öneki, şablonlarınızdaki Vue'ya özgü özellikleri tanımlamak için görsel bir ipucu görevi görür. Varolan biçimlendirmeye dinamik davranış uygulamak için Vue.js'yi kullanırken bu yararlıdır, ancak bazı sık kullanılan yönergeler için ayrıntılı hissedebilirsiniz. Aynı zamanda, Vue.js'nin her şablonu yönettiği bir SPA oluştururken v-önekine olan ihtiyaç daha az önem kazanır.

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

Kaynak: resmi belgeler .

— Cobaltway
kaynak

1

@ İçin Vue topluluğu tercihi var mı, yoksa v-on kullanımı hakkında şikayet etmek sadece JetBrains tercihi mi?

— Kimmo Hintikka

5

@KimmoHintikka Evet, bir şekilde kısayola (@) yönelik bir tercih var. Kural dahildir strongly-recommendedve recommendedeslint-eklenti-vue hazır ayarlar. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…

— Cobaltway

63

v-bindve v-onvuejs html şablonunda sık kullanılan iki yönergedir. Böylece her ikisi için kısaca bir gösterim sağladılar:

Sen değiştirebilirsiniz v-on:ile@

v-on:click='someFunction'

gibi:

@click='someFunction'

Başka bir örnek:

v-on:keyup='someKeyUpFunction'

gibi:

@keyup='someKeyUpFunction'

Benzer şekilde, v-bindile:

v-bind:href='var1'

Şu şekilde yazılabilir:

:href='var1'

Umarım yardımcı olur!

— Nitin Kumar
kaynak

@LorenzoBerti bu cevaba ne dersiniz? Daha fazla anlamanıza yardımcı oldu mu?

— Nitin Kumar

Cevap hiçbir şeyi açıklamıyor, sadece 1/3'ü sorulan soru ile tutarsız örnekler veriyor. afedersiniz.

— Jakub Strebeyko

v-bind ve v-on, vuejs html şablonunda sık kullanılan iki yönergedir. Bu yüzden her ikisi için de kestirme bir gösterim sağladılar bence bu soruyu açıklıyor. işaret js belgelerinde de verilen neden budur :-)

— Nitin Kumar

Mesele şu ki, cevap 4 ay sonra hiçbir bağlantı, alıntı yapma ve v-bind için kolon-stenoya atma, aslında karışıklığa katkıda bulunacak.

— Jakub Strebeyko

2

Normal HTML'den biraz farklı görünebilirler, ancak: ve @ özellik adları için geçerli karakterlerdir ve tüm Vue.js destekli tarayıcılar doğru şekilde ayrıştırabilir. Ayrıca, son oluşturulan biçimlendirmede görünmezler. Steno sözdizimi tamamen isteğe bağlıdır, ancak daha sonra kullanımı hakkında daha fazla bilgi edindiğinizde muhtemelen takdir edersiniz.

Kaynak: resmi belgeler .

— dharma
kaynak