[VueJS] v-bind 와 v-on 약어 사용하기

vueJS에서 가장 많이 사용되는 v-bind 와 v-on 표현식에 대한 약어에 대해 알아보자.

아마 가장 많이 사용하는 표현식이라 vueJS에서도 약어를 만들어놓은게 아닐까하는 생각이든다.

 

예제를 통해 접해보자.

 

▷ 예제1) v-bind 약어

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

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

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

 

▷ 예제2) v-on 약어

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

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

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

---

확실히 익숙해지니까 약어가 굉장히 편리하다.

 

출처 : https://kr.vuejs.org/v2/guide/syntax.html#%EC%95%BD%EC%96%B4

템플릿 문법 — Vue.js