Vue.jsのディレクティブについて
省略記号は2つのみ(公式より)
https://jp.vuejs.org/v2/guide/syntax.html
v-bind と v-onの2つ
結論
v-bind:は「:」
v-on:〇〇は「@〇〇」
に省略可能
以下は公式より
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
v-bind 省略記法
<!-- 完全な構文 -->
<a v-bind:href="url"> ... </a>
<!-- 省略記法 -->
<a :href="url"> ... </a>
<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a :[key]="url"> ... </a>
v-on 省略記法
<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>
<!-- 省略記法 -->
<a @click="doSomething"> ... </a>
<!-- 動的引数の省略記法 (2.6.0 以降) -->
<a @[event]="doSomething"> ... </a>
</body>
</html>