Vue.jsのアットマーク等の省略記法【現役エンジニアが解説】

PROGRAM

今回は、Vue.jsのアットマーク等の省略記法について、簡単に解説していきます。

v-bind:と:(コロン)

v-bind:は省略することができます。

一番後ろの:(コロン)だけでもv-bind:を表せます。

<a v-bind:href="url"> ... </a>

例えば、上記の書き方と下記の書き方は同じものを表しています。

<a :href="url"> ... </a>

v-on:と@(アットマーク)

v-on:も省略可能です。

v-on:の場合は@で表せます。

<a v-on:click="doSomething"> ... </a>

上記のコードと下記のコードは同じものを表します。

<a @click="doSomething"> ... </a>

v-slot:と#(シャープ)

v-slot:も省略できます。

v-slot:は、#で代用できます。

<template v-slot:header> ... </template>

上記の記法と下記の記法は同じ意味になります。

<template #header> ... </template>