데이터 바인딩(Data Binding)은 HTML 화면 요소를
뷰 인스턴스에 있는 데이터와 연결을 하는것이다.
주요 문법으로 {{ }} 와 v-bind 가 있다.
먼저 {{ }} 는 뷰 인스턴스에 데이터를 HTML 태그에
연결 할 수 있는 가장 기본적인 텍스트 삽입 방식이다.
뷰 뿐만 아니라 다른 언어나 프레임워크에서도 자주 사용되는
템플릿 문법이다. 간단하게 형식을 보자.
위 소스는 data 속성이 message 속성값인
Test!! 를 div 태그의 {{ message }} 에 연결하여
화면에 출력시켜주는 소스이다. 여기서 data 속성의
message값이 바뀌면 뷰 반응성에 의해 화면이
자동으로 갱신 될것이다.
만약 뷰 데이터가 변경되도 값을 변경시키고 싶지않다면
아래와 같이 v-once 속성을 사용하면된다.
v-bind는 아이디, 클래스, 스타일 등 HTML속성 값에 뷰 데이터 값을
연결할 때 사용된다. 사용법으로는 v-bind 속성으로 지정할 HTML속성이나
props속성 앞에 붙여주면 된다. 아래 소스를 보며 확인하자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <title>Vue Template - Data Binding</title> </head> <body> <div id="app"> <p v-bind:id="idA">아이디 바인딩</p> <p v-bind:class="classA">클래스 바인딩</p> <p v-bind:style="styleA">스타일 바인딩</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { idA: 10, classA: 'container', styleA: 'color: blue' } }); </script> </body> </html> | cs |
위 소스는 HTML의 기본속성인 id, class, style앞에 v-bind를 붙여서
뷰 인스턴에서 정의한 데이터 속성과 연결을하여 화면에 출력시켜준다.
위 소스를 실행해보면 데이터의 값이 <p>태그에 연결되어
화면에 출력되는 것을 확인할 수 있다.
위 이미지를 보면 p 태그 안의 idA, classA, styleA값에
각각 10, container, color:blue 가 들어가 있는것을
확인할 수 있다. 특히 styleA는 스타일값이 바로 반영되어
화면에 파란 글씨로 출력된것을 확인할 수 있다.