[ITSkeleton][vue.js] 데이터 바인딩

지난 글에 이어서 데이터 바인딩에 대하여 한번 알아봅시다

 

지난글: [Vue.js ( nuxt.js )] - [ITSkeleton][vue.js] 기초 (Hello World!)

[ITSkeleton][vue.js] 기초 (Hello World!)

이전 글에 설명이 되어있듯이 이번에도 jsfiddle을 이용하여 설명을 해보겠습니다

 

일단 html에 아래와 같이 적습니다

<div id="app">
  ITskeleton Vue.js 100<br/> {{ 'Hello' + 100 + ' world' }}
</div>

javascript

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

이렇게 적는다면

이렇게 화면이 나오죠?

 

데이터 바인딩의 기본을 이용하기 위해서는 html에 직접적으로 100이라는 글자를 추가해서 적는것 보다는 인스턴스 내부에 선언된 변수에 할당하여 화면에 띄워주는 것이 좋습니다.

 

먼저 javascript에

new Vue({
  el: '#app',
  data: {
    count: 100 + 10
  }
})

이렇게 적어 줍니다.

 

여기서 data옵션을 이용하여 변수를 설정해줍니다.

<div id="app">
  ITskeleton Vue.js {{count}}<br/>Hello world {{count}}
</div>

html코드를 다음과 같이 작성해 줍니다

 

그럼 {{count}}에 데이터가 바인딩 되는것을 확인 하실수 있습니다

이제! 데이터 바인딩의 기본에 대하여 알게 되었습니다.

 

다음은 v-for문을 사용하는 방법을 알아보겠습니다. 

 

다음글: [ITSkeleton][vue.js] v-for(열거)를 사용해봅시다 , 바인딩