@click和v-on：click Vuejs之间的区别

160

问题应该足够清楚:)。但我可以看到有人在使用：

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

有人使用：

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

但实际上两者之间有什么区别（如果存在）

vue.js vuejs-directive

— 洛伦佐·贝蒂
source

188

两者之间没有区别，一个只是第二个的简写。

v前缀用作可视提示，用于标识模板中特定于Vue的属性。当您使用Vue.js将动态行为应用于某些现有标记时非常有用，但对于某些常用指令可能会感到冗长。同时，在构建由Vue.js管理每个模板的SPA时，对v-前缀的需求变得不那么重要。

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

资料来源：官方文档。

— 钴道
source

1

Vue社区对@偏爱还是只是JetBrains对抱怨使用v-on偏爱？

— Kimmo Hintikka

5

@KimmoHintikka是的，对快捷方式（@）有某种偏爱。该规则包括在strongly-recommended与recommended该eslint-插件-VUE预置。github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…–

— Cobaltway

62

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'

希望能帮助到你！

— 尼丁·库玛（Nitin Kumar）
source

@LorenzoBerti这个答案怎么样。它有助于您了解更多吗？

— Nitin Kumar

答案没有任何解释，仅举了示例1/3与所提出的问题不一致。抱歉。

— Jakub Strebeyko

v-bind和v-on是vuejs html模板中两个经常使用的指令。因此，他们为他们两个都提供了一种简写形式，我认为这可以解释这个问题。这也是cue js文档中提供的原因：-)

— Nitin Kumar，

问题是4个月后发布了答案，没有链接，没有引文，并且在冒号的简写中加入了v-bind，这实际上会加剧混乱。

— Jakub Strebeyko

2

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

资料来源：官方文档。

— 法
source