VueJS - 3. HTML 속성에 접근 v-bind / VueJS Directive

아래 글을 따라하며 VueJS에 적응하기

 

https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90-vuejs-003-vuejs-directive-v-bind-a4844574e6ae

[맨땅에 VueJS] HTML 속성에 접근 v-bind / VueJS Directive

요약

<a href="{{ link }}">링크</a> // (x) 이렇게 사용할 수 없음

 

안타깝게도 HTML의 속성에는 {{ mustached }}를 사용할 수 없다.

위의 예와 같이 a 태그의 href 속성 값을 변경하고 싶은 경우라면 {{ mustached }} 대신 v-bind 디렉티브를 사용해야 한다. 이는 약어로도 사용 가능하다.

v-bind 약어 :

v-bind:href=“url”을 줄여서 :href=”url” 이라고 표기

v-on 약어 @

v-on:click=“doSomething”을 줄여서 @click=”doSomething” 이라고 표기

 

- 실제 실행 화면