Różnica między @click i v-on: kliknij Vuejs

160

pytania powinny być wystarczająco jasne :). Ale widzę, że ktoś używa:

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

Ktoś używa:

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

Ale tak naprawdę jaka jest różnica między tymi dwoma (jeśli istnieje)

vue.js vuejs-directive

— LorenzoBerti
źródło

189

Nie ma różnicy między tymi dwoma, jeden jest tylko skrótem dla drugiego.

Prefiks v- służy jako wizualna wskazówka do identyfikacji atrybutów specyficznych dla Vue w szablonach. Jest to przydatne, gdy używasz Vue.js do zastosowania dynamicznego zachowania do niektórych istniejących znaczników, ale może wydawać się rozwlekłe w przypadku niektórych często używanych dyrektyw. Jednocześnie potrzeba przedrostka v- staje się mniej ważna, gdy tworzysz SPA, w którym Vue.js zarządza każdym szablonem.

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

Źródło: oficjalna dokumentacja .

— Cobaltway
źródło

1

Czy społeczność Vue preferuje @, czy tylko JetBrains woli narzekać na używanie v-on?

— Kimmo Hintikka

5

@KimmoHintikka Tak, w jakiś sposób preferowany jest skrót (@). Reguła jest włączone strongly-recommendedi recommendedz pamięcią eslint-plugin-Vue. github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…

— Cobaltway

63

v-bindi v-onsą dwiema często używanymi dyrektywami w szablonie vuejs html. Więc podali skrótowy zapis dla nich obu w następujący sposób:

Można wymienić v-on:z@

v-on:click='someFunction'

tak jak:

@click='someFunction'

Inny przykład:

v-on:keyup='someKeyUpFunction'

tak jak:

@keyup='someKeyUpFunction'

Podobnie v-bindz:

v-bind:href='var1'

Można zapisać jako:

:href='var1'

Mam nadzieję, że to pomoże!

— Nitin Kumar
źródło

@LorenzoBerti, a co powiesz na tę odpowiedź. Czy pomogło ci to zrozumieć więcej?

— Nitin Kumar

Odpowiedź niczego nie wyjaśnia, a jedynie podaje przykłady, z których 1/3 jest niezgodna z zadanym pytaniem. Przepraszam.

— Jakub Strebeyko

v-bind i v-on to dwie często używane dyrektywy w szablonie vuejs html. Więc dostarczyli skróconą notację dla nich obu, myślę, że to wyjaśnia pytanie. to jest powód podany również w dokumentacji cue js :-)

— Nitin Kumar

Chodzi o to, że odpowiedź została opublikowana 4 miesiące później, bez linków, bez cytatu i wrzucenia skrótu dwukropka dla v-bind, co może faktycznie zwiększyć zamieszanie.

— Jakub Strebeyko

2

Mogą wyglądać trochę inaczej niż normalny HTML, ale: i @ są prawidłowymi znakami dla nazw atrybutów i wszystkie przeglądarki obsługiwane przez Vue.js mogą je poprawnie przeanalizować. Ponadto nie pojawiają się w końcowym renderowanym znaczniku. Skrócona składnia jest całkowicie opcjonalna, ale prawdopodobnie docenisz ją, gdy dowiesz się więcej o jej użyciu później.

Źródło: oficjalna dokumentacja .

— dharma
źródło