与@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>

资料来源:官方文件.

Answer 2

v-bind并且v-on是vuejs html模板中两个经常使用的指令.因此,他们为这两者提供了简写符号如下:

您可以替换v-on:使用@

v-on:click='someFunction'

如:

@click='someFunction'

另一个例子:

v-on:keyup='someKeyUpFunction'

如:

@keyup='someKeyUpFunction'

同样,v-bind:

v-bind:href='var1'

可以写成:

:href='var1'

希望能帮助到你!