[vue.js] Mustache(이중중괄호), v-bind

 

 

 

1. Mustache 구문 - 이중 중괄호

 

데이터 바인딩의 가장 기본 형태는 'Mustache' 구문 (이중 중괄호)을 사용한 텍스트 보간이다.

화면에 문자열을 출력하는 간단한 경우에 쓰인다.

 

 

화면에서는 다음과 같이 나온다.

 

 

Mustache 태그는 해당 데이터 객체의 msg 속성 값으로 대체된다.

또한 msg 의 속성이 변경될 때마다 갱신된다.

즉 내가 msg: 고친다. 라고 한다면

 

 

화면에 이렇게 변경된 msg의 값이 나온다.

 

 

 

 

2. 디렉티브

화면에 문자열을 출력하는 간단한 경우에는 {{ }} 이중중괄호를 쓰면 되지만,

만약 html 속성 내에서 vue 내에 선언된 값을 사용하고 싶어진다면? 

그때는 v-bind 라는 디렉티브를 쓰면 되는데, 

 

이때 디렉티브란 v- 접두사가 있는 특수 속성을 말하며 여러가지 디렉티브가 존재한다.

디렉티브 속성 값은 단일 JavaScript 표현식이 된다. (v-for은 제외)

디렉티브의 역할은 표현식의 값이 변경될 때 사이드이펙트를 반응적으로 DOM에 적용하는 것이다.

 

 

3. v-bind

 

엘레멘트의 프로퍼티 값을 바인딩한다. 주로 단방향으로 무엇인가를 설정해줄때 쓴다.

html  속성에 vue내의 값을 사용 할 수 있도록한다.

 

원래라면

<a href="http://www.naver.com">링크</a> 

라고 써야할 곳에

<a v-bind:href="link">라고 v-bind를 써서 입력한다

그리고 데이터 객체의 link 속성 값이 저 a태그의 속성값이 되는 것이다.

 

화면의 a 태그를 누르면 내가 link 속성 값으로 지정해놓은 네이버 페이지로 이동하게된다.

 

 

* v-bind 전체문법

<a v-bind:href="url"> ... </a> 

* v-bind 약어

<a :href="url"> ... </a>