[Udemy Vue 완벽가이드 Section2] 16. 'v-bind'디렉티브로 속성 바인딩하기

데이터 출력 시, 항상 보간법만 사용해야 하는건 아니다.

 

# 속성 바인딩에 보간법 사용시

보간법 예시:

link를 걸 때, Vue앱을 이용하여 data 프로퍼티에 link값(ex: https://vuejs.org/)을 저장하고, 구문(ex: {{ vueLink }})을 추가하여 저장된 값을 출력해보자. 

 

index.html

<p>Learn more <a href="{{ vueLink }}">about Vue</a></p>

 

app.js

const app = Vue.createApp({
 data(){
  return {
   vueLink: 'https//vuejs.org/'
  }
 }
});
app.mount('#user-goal');

data 반환객체에 vueLink 프로퍼티를 추가하고, href="{{ vueLink }}" 이렇게 적어보자.

활성화된 'about Vue'를 클릭해보니 오류가 발생한다...

개발자도구를 켜보니, ref속성에 대해 입력한 값이 변환되지 않은 이중 중괄호 그대로이다. 즉, Vue가 'vueLink'값을 'https://vuejs.org'로 변환하지 않았다.

 

Why?

Vue가 조정하는 HTML코드 안에 있는데도 왜 Vue가 vueLink값을 제대로 변환하지 못하는걸까?

→ 이중중괄호 구문(보간법)은, '여닫는 HTML 태그'에서만 사용할 수 있다. <p>{{ courseGoal }}</p> 이렇게.

 

 

# v-bind

data를 출력하고자 할때 해당 값을 '속성'에 입력했다면 사용할 수 있는 특별구문이 있다. → v-bind

- v-bind는 예약된 이름으로, Vue가 이를 감지하고 인식할 수 있다. (v-로 시작한다는 점에서 Vue와 관련되어 있다는걸 알 수 있다. Vue를 통해 실행되는 모든 내장 디렉티브는 이름이 v-로 시작한다.)

- directive는 Vue에 대해 우리가 주는 일종의 지시사항. 따라서 v-bind는 Vue에게 바인딩을 지시하는 지시사항이다. 

- Vue에 어떤 속성의 값을 설정해야하는지 알려주기 위해 v-bind뒤에 콜론을 입력한 후, 속성의 이름을 쓴다. 설정해야하는 값은 따옴표 사이에 입력.

- 이렇게 하면 Vue가 HTML 요소의 속성에 대해 동적으로 값을 바인딩하거나 설정하도록 지시하는 구문이 된다.

<a v-bind:href="vueLink"></a>

 

 

다시 정리하면,

- v-bind는 보간법 구문을 '속성'으로 대체한 버전이다.

- HTML 태그 사이에 값을 설정할 때는 보간법 사용, HTML 속성에 값을 설정할 때는 v-bind

 

즉, HTML 속성에 대해 Vue가 관리하는 데이터를 그 값으로 설정해야 하는 경우 v-bind 사용

 

# v-bind 축약어

v-bind:속성명 의 축약어로 콜론(:)과 속성명만 작성하면 된다.

<a v-bind:href="vueLink"></a>
<a :href="vueLink"></a>

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.