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

Question

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

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

有人使用：

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

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

Answer 1

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

  

v-前缀用作识别Vue特定的视觉提示   模板中的属性。当您使用Vue.js时，这很有用   将动态行为应用于某些现有标记，但可以感受到   一些经常使用的指令冗长。与此同时，   当你构建一个时，对v-前缀的需求变得不那么重要了   Vue.js管理每个模板的SPA。

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

来源：official documentation。

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支持的浏览器都可以正确解析它。此外，它们不会出现在最终的渲染标记中。速记语法完全是可选的，但是稍后您将进一步了解其用法时，可能会喜欢它。

来源：official documentation。