@click 和 v-on 的区别：点击 Vuejs答案

【问题标题】：Difference between @click and v-on:click Vuejs@click 和 v-on 的区别：点击 Vuejs
【发布时间】：2018-01-04 06:58:48
【问题描述】：

问题应该足够清楚。

但我可以看到有人使用：

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

有人使用：

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

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

【问题讨论】：

【解决方案1】：

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

v- 前缀用作识别 Vue 特定的视觉提示模板中的属性。这在您使用 Vue.js 时很有用将动态行为应用于某些现有标记，但可以感觉到一些常用指令的详细说明。同时，当您构建一个 Vue.js 管理每个模板的 SPA。

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

【讨论】：

是否有 Vue 社区对 @ 的偏好，或者只是 JetBrains 偏好抱怨使用 v-on？
@KimmoHintikka 是的，在某种程度上偏爱快捷方式 (@)。该规则包含在 eslint-plugin-vue 预设的 strongly-recommended 和 recommended 中。 github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/…

【解决方案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'

希望对你有帮助！

【讨论】：

@LorenzoBerti 这个答案怎么样。是否帮助您了解更多？
答案并没有解释什么，只是给出了1/3的例子，其中1/3与所问的问题不一致。对不起。
v-bind 和 v-on 是 vuejs html 模板中两个常用的指令。所以他们为他们俩提供了一个速记符号，我认为这解释了这个问题。这也是 cue js 文档中提供的原因:-)
问题是答案已在 4 个月后发布，没有链接，没有引用，并且在 v-bind 的冒号简写中加入，这实际上会增加混乱。
@JakubStrebeyko 我不知道你在说什么，但这是一个非常简洁的答案，也消除了我对普通冒号的困惑，我不知道它代表 v-bind。

【解决方案3】：

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

【讨论】：