@click 和 v-on:click Vuejs 的区别

Question

问题应该够清楚了。

但我可以看到有人使用：

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

有人使用：

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

但两者到底有什么区别（如果存在的话）

Answer 1

两者没有区别，一个只是一个shorthand第二个

The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the v- prefix becomes less important when you are building an SPA where Vue.js manages every template.

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

来源：official documentation.

Answer 2

v-bind 和 v-on 是 vuejs html 模板中经常使用的两个指令。所以他们为他们两个提供了一个 shorthand 符号如下：

您可以将 v-on: 替换为 @

v-on:click='someFunction'

如：

@click='someFunction'

另一个例子：

v-on:keyup='someKeyUpFunction'

如：

@keyup='someKeyUpFunction'

类似地，v-bind 与 :

v-bind:href='var1'

可以写成：

:href='var1'

希望对您有所帮助！

Answer 3

它们看起来可能与正常的 HTML 有点不同，但是 : 和 @ 是属性名称的有效字符，所有 Vue.js 支持的浏览器都可以正确解析它。此外，它们不会出现在最终呈现的标记中。 shorthand 语法完全是可选的，但是当您稍后了解更多有关它的用法时，您可能会喜欢它。

来源：official documentation.

@click 和 v-on:click Vuejs 的区别

Difference between @click and v-on:click Vuejs

vue.js

vue-directives