與@click和v-on的區別：點擊Vuejs

Question

的問題應該足夠清楚:)。 但我可以看到有人使用：

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

有人使用：

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

但什麼是真正的兩者之間的差異（如果存在）

Answer 1

沒有兩者之間的區別，一個只是第二個速記。

的V-前綴充當在模板中識別特定的Vue 屬性的視覺線索。當您使用Vue.js 將動態行爲應用於某些現有標記時，此功能很有用，但對於某些常用指令，可能會感覺爲詳細 。與此同時，當您構建一個Vue.js管理每個模板的SPA時，對v-前綴的需求變得不那麼重要。

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

來源：official documentation。

Answer 2

v-bind和v-on是vuejs html模板中經常使用的兩個指令。 所以他們提供了他們兩人的縮寫符號如下：

@click='someFunction' 

又如：：

v-on:keyup='someKeyUpFunction' 

你可以用@

v-on:click='someFunction' 

如更換v-on:作爲：

@keyup='someKeyUpFunction' 

同樣，v-bind有：

v-bind:href='var1' 

可以寫爲：

:href='var1' 

希望它能幫助！