VUE 데이터 바인딩

데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. 

주요 문법으로는 {{ }} 문법과 v-bind 속성이 있습니다.

{{ }} - 콧수염 괄호

{{ }}는 뷰 인스턴스의 데이터를 HTML 태그에 연결하는 가장 기본적인 텍스트 삽입 방식입니다. 
{{ }}는 모양이 콧수염과 비슷하다고 하여 콧수염 괄호라고 부릅니다. 뷰뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는 템플릿 문법(template syntax)입니다. 앞의 예제에서 계속 다뤘기 때문에 많이 익숙하겠지만 간단히 형식을 정리하면 다음과 같습니다.

아래 코드는 data 속성의 message 속성 값인 Hello Vue.js!를 <div> 태그 안의 {{ message }}에 연결하여 화면에 나타내는 코드입니다. 여기서 만약 data 속성의 message 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신됩니다.

 

<div id="app">
 {{ message }}
</div>
<script>
 new Vue({
   el: '#app',
   data: {
     message: 'Hello Vue.js!'
   }
 });
</script>

{{ }}를 이용한 데이터 바인딩
 

 

만약 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않다면 아래와 같이 같이 v-once 속성을 사용합니다.

<div id="app" v-once>
 {{ message }}
</div>

v-once 속성을 이용한 1회 바인딩

 

 

v-bind

v-bind는 아이디, 클래스, 스타일 등의 HTML 속성(attributes) 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식입니다. 형식은 v-bind 속성으로 지정할 HTML 속성이나 props 속성 앞에 접두사로 붙여줍니다. 그럼 다음 코드를 함께 살펴보겠습니다.

 

<div id="app">
	 <p v-bind:id="idA">아이디 바인딩</p>
	 <p v-bind:class="classA">클래스 바인딩</p>
	 <p v-bind:style="styleA">스타일 바인딩</p>
</div>
...
<script>
	 new Vue({
	 	 el: '#app',
	 	 data: {
	 	 	 idA: 10,
	 	 	 classA: 'container',
	 	 	 styleA: 'color: blue'
	 	 }
	 });
</script>

 

이 코드는 HTML의 기본 속성인 id, class, style의 앞에 v-bind:를 붙여서 뷰 인스턴스에 정의한 데이터 속성과 연결하여 화면에 나타내는 예제입니다. 코드를 실행하면 데이터의 값이 각 <p> 태그에 연결되어 화면에 나타납니다.

 

추가로 v-bind: 문법을 :로 간소화할 수 있습니다. 예를 들어, v-bind:id와 :id는 같은 동작을 합니다. 이처럼 약식 문법을 사용할 때는 기본 문법과 약식 문법을 혼용해서 사용하지 않는 것이 좋습니다. 또한 뷰 코드가 전반적으로 v- 접두사를 붙이는 형태이기 때문에 가급적 v-bind 속성을 이용하는 것이 기존 HTML 문법과 구분도 되고 다른 사람이 코드를 파악하기도 쉽습니다.