Vue.js_props 와 약어

Props를 사용할때 ":" 의미

<myComponent v-bind:do-somthing="..."></myComonent>
<myComponent :do-somthing="..."></myComponent>

위의 예제는 동일한 prop이다.
: 기호는 약어(단축키워드)로서, v-bind: 대신에 :을 사용할 수 있다.
: 이나 @ 같은 기호들은 자주사용되는 v-접두사의 대표적인 약어이며 최종렌더링 마크업에는 나타나지않는다.

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>