[ VueJS 입문 ] HTML 속성에 접근 v-bind / VueJS Directive

• HTML 속성에 접근하기

지금까지 HTML 코드에 {{ mustached }} 를 사용해 원하는 위치에 Vue의 값 또는 함수를 불러왔다. 만일 지금과 같은 문자열을 출력하는게 아닌 HTML의 속성 내에서 선언을 하고 싶을땐 이전과 같은 방법으론 불가능하다.

Ex) <a href = "{{ link }}">링크</a>  // 사용불가능

위와 같이 하이퍼링크부분에 속성을 삽입하고 싶다면 {{ mustached }}가 아닌 v-bind 디렉티브를 사용해야한다.

 

• 디렉티브(Directive) 란?

디렉티브란, HTML 태그 안에 들어가는 속성의 역할을 하며, v- 라는 접두사가 붙는것이 특징이다. 디렉티브는 여러가지가 있다.

 

• Html 속성에 접근하는 v-bind - https://jsfiddle.net/sunghun/th2m9ws7/6/

Html속성에 Vue내의 값을 사용할 수 있도록 도와주는 v-bind 디렉티브.

A태그 내에 href="링크주소" 속성이 있어야하는 곳에 v-bind 디렉티브를 넣어 <a v-bind:href="link">링크</a> 라고 입력하였다. ㅡ리고 data 값에 link로 https://naver.com 이 선언되어 있다. 이를 Run버튼으로 실행 시키면 링크라는 문자열에 link의 속성값인 naver주소가 링크되어 있는 것을 확인 할 수 있다.

 

• 약어

v- 접두사는 템플릿의 Vue특정 속성을 식별하기 위한 시각적인 신호 역할로 반복적으로 사용이 불필요하여 약어를 제공한다. 자주 사용되는 v-bind와 v-on는 특별한 약어를 제공한다.

• v-bind 약어 :

v-bind:href="url"은 약어로 줄여서 :href="url"로 표기할 수 있다.

• v-on 약어 @

v-on:clink="doSomething"을 약어로 줄여 @clink="doSomething"로 표기할 수 있다.