vue.js 약어 단축표기

v-bind

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-slot

<!-- 이전 문법 (중단 예정)-->
<template slot="slotName" slot-scope="slotProps"> ... </template>

<!-- 2.6.0+ 문법 -->
<template v-slot:slotName="slotProps"> ... </template>

<!-- shorthand with dynamic argument (2.6.0+) -->
<template v-slot:[dynamicSlotName]="slotProps"> ... </template>

<!-- 약어 -->
<template #slotName="slotProps"> ... </template>

<!-- shorthand with dynamic argument (2.6.0+) -->
<template #[dynamicSlotName]="slotProps"> ... </template>

참고

• 템플릿 문법 약어
• 이름이 있는 슬롯 디렉티브의 단축표기