Różnica od @click i v-on: kliknij Vuejs

Question

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

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

Ktoś używać:

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

Ale naprawdę, jaka jest różnica między nimi (jeśli istnieje)

Answer 1

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

V- prefiks służy jako wizualny wskaźnik dla identyfikacji Vue specyficzne atrybuty w szablonach. Jest to przydatne, gdy używasz Vue.js , aby zastosować zachowanie dynamiczne do niektórych istniejących znaczników, ale możesz poczuć, że w przypadku niektórych często używanych dyrektyw jest to bardzo szczegółowe. W tym samym czasie, potrzeba prefiksu v staje się mniej ważne, gdy budujesz SPA, gdzie Vue.js zarządza każdym szablonem.

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

Źródło: official documentation.

Answer 2

v-bind i v-on to dwie często używane dyrektywy w szablonie html vuejs. więc warunkiem skróconym zapisem dla obu z nich w następujący sposób:

Można zastąpić v-on: z @

v-on:click='someFunction' 

jak:

@click='someFunction' 

Inny przykład:

v-on:keyup='someKeyUpFunction' 

as:

@keyup='someKeyUpFunction' 

Podobnie v-bind z:

v-bind:href='var1' 

może być zapisany jako:

:href='var1' 

Nadzieję, że to pomaga!