这两者之间没有区别，一个只是第二个的简写。
v-前缀用作标识模板中Vue特定属性的可视提示。当您使用Vue.js将动态行为应用于某些现有标记时，这很有用，但对于某些常用指令可能会感到冗长。同时，当您构建Vue.js管理每个模板的SPA时，对v-前缀的需要就变得不那么重要了。

<!-- 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'

作为：

@click='someFunction'

另一个例子：

v-on:keyup='someKeyUpFunction'

作为：

@keyup='someKeyUpFunction'

类似地，v-bind与:

v-bind:href='var1'

可以写成：

:href='var1'

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

官方来源

官方的Vue.js风格指南建议坚持使用一个版本并保持一致。
指令速记（：对于v-bind：，@对于v-on：和#表示V形槽）应该使用总是或从不。
此规则在“强烈推荐”一节中定义。
通过使用eslint-plugin-vue插件并设置vue/v-on-style规则，可以在eslint中强制执行此操作。
默认设置为速记。

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

示例

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

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