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

问题应该足够清楚。

但我可以看到有人用:

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

有人使用:

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

但这两者之间究竟有什么区别(如果存在的话)?

两者之间没有区别，前者只是后者的简称。

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

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

资料来源:官方文件。

V-bind和v-on是vuejs HTML模板中常用的两个指令。所以他们提供了一个简单的符号来表示它们，如下:

你可以用@替换v-on:

v-on:click='someFunction'

as:

@click='someFunction'

另一个例子:

v-on:keyup='someKeyUpFunction'

as:

@keyup='someKeyUpFunction'

类似地，v-bind with:

v-bind:href='var1'

可以写成:

:href='var1'

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

资料来源:官方文件。

官方来源

Vue.js的官方风格指南建议坚持使用一个版本并保持一致。

指令简写(:用于v-bind:， @用于v-on:和#用于v-slot)应该总是使用或永远不使用。

该规则在“强烈推荐”部分中定义。

它可以通过eslint-plugin-vue plugin和设置vue/v-on-style规则在eslint中强制执行。

默认设置为速记。

{
  "vue/v-on-style": ["error", "shorthand" | "longform"]
}

例子

<template>
  <!-- ✓ GOOD -->
  <div @click="foo"/>

  <!-- ✗ BAD -->
  <div v-on:click="foo"/>
</template>

推荐文章