[Vue.JS] 보간법 디렉티브(Directive) v-bind, v-on 약어

오늘은 Vue.JS 보간법 디렉티브(Directive) v-bind, v-on 약어에 대해 포스팅하려고 합니다.

 

vue에서는 인스턴스에 선언한 엘리먼트를 통해서 DOM요소를 제어합니다.
DOM 제어는 v- 접두어가 붙어있는 보간법 디렉티브 속성들을 사용합니다.
디렉티브 속성중에서 v-bind와 v-on은 vue에서 자주 사용되기 때문에 약어를 제공하고 있습니다.
약어의 사용은 개인의 취향 또는 선택사항이지만 개발자끼리 소통 또는 서로의 코드를 공유하고 

쉽게 이해하기 위해서는 필수로 알아두어야 한다고 생각합니다.

 

 

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

 

 

 

Vue.JS 보간법 디렉티브(Directive) v-bind, v-on 약어에 대한 포스팅이었습니다.