[Vue.js] 3. v-bind/Directive

앞에서 data 안의 변수 title 에 접근 시 {{ }} 기호를 사용한다고 배웠다.

 

[HTML]

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app1">
  <p>
   {{title}}
  </p>
</div>

 

그런데 이렇게 문자열을 출력하는 간단한 경우가 아니라 HTML 속성 안에 직접 사용하고 싶은 경우엔 어떻게 해야될까 ?

 

[HTML]

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app1">
  <a href={{link}}></a>
</div>

[JAVASCRIPT]

new Vue({
   el : "#app1",
    data : { // 객체형태
        link : "https://www.google.com/"
    },
});

 

속성에 직접 넣어주고싶은경우 {{ }} 를 사용할 수 없다. 대신

vue.js 에서 Directive 의 하나인 v-bind 를 사용한다 !

 

Directive

HTML 태그 안에 들어가는 속성의 역할을 하며, v-라는 접두사가 붙는 것이 특징이다

 

 

a 태그 내에 href="링크주소" 속성이 있어야하는 곳에 v-bind 디렉티브를 넣어서 <a v-bind:href="link">링크</a>라고 입력했다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app1">
  <a v-bind:href="link">링크</a>
</div>

이렇게 v-bind 디렉티브를 사용하여 Vue 인스턴스 내에 선언된 값을 HTML 코드의 속성 값에 사용할 수 있다.

 

v-bind 약어 :

 

이 v-bind 는 아주 자주 사용되기 때문에 특별한 약어를 제공하는데,

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app1">
  <a :href="link">링크</a>
</div>

v-bind:href=“url”을 줄여서 :href=”url” 이라고 표기해줄 수 있다.

 

v-on 약어 @

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app1">
  <p>{{count}}</p>
  
  // 두가지 서로 같은걸 의미함
  <button v-on:click="clickButton()">+</button>
  <button @click="clickButton()">+</button>
</div>