[Vue.js] 데이터 바인딩(data binding)

Vue.js의 가장 기초가 되는 데이터 바인딩부터 정리해보기로 했다.

 

<div id="app"></div>

 

new Vue({
    el: '#app'
});

 

화면의 div 요소와 Vue의 인스턴스를 연결한 내용이다.

data를 연결하려면 어떻게 해야 할까?

 

<div id="app"> {{ message }} </div>

 

new Vue({
    el: '#app',
    data: {
    	message: 'hi?'
    }
});

 

Vue 인스턴스에는 data 속성을 추가해주고, 화면에는 Mustache Tag(이중 중괄호 문법)를 활용해서 data를 명시해준다.

가장 기본적인 데이터 바인딩 방법이다.

 

---

위 방법이 화면에 표시되는 텍스트 바인딩 방법이고

html 태그 속성도 바인딩이 가능하다.

 

<div id="app" v-bind:class="cls"> {{ message }} </div>
<div id="app" :class="cls"> {{ message }} </div>

 

new Vue({
    el: '#app',
    data: {
    	message: 'hi?',
        cls: 'hello'
    }
});

 

html 속성 태그에 v-bind: 혹은 약어 : 를 붙여주면 된다.

data 속성과 바인딩되어 data 값이 변함에 따라 class 값도 변경된다.

 

 

<button id="btn" :disabled="dis"> {{ message }} </button>

 

new Vue({
    el: '#btn',
    data: {
    	message: 'click',
        dis: true
    }
});

 

button의 disabled 속성에 data를 바인딩하여 사용하는 예제이다.

dis 값이 변경되면 버튼이 활성화, 비활성화되는 것을 확인할 수 있다.

 

 

<div v-bind:id="'list-' + id"></div>

 

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}

 

추가로 vue의 데이터 바인딩은 자바스크립트 표현식이 가능하다고 한다.

각 바인딩은 하나의 단일 표현식만 사용할 수 있다.

 

기초지만 중요한 데이터 바인딩에 대해 알아봤다.