Vue.js v-bind v-onの省略

v-bindとv-onには、特別な省略の仕方があります。

公式ドキュメントから引用させて紹介させていただきます。

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>

まとめ

v-bind、v-onには省略した書き方があり、

その書き方を多用される場面もあるので、このような書き方があることは覚えておきましょう。