vue.js - @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'

希望能帮助到你！

Answer 3

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

来源：官方文档。