Vue js 2 Data

Vue js Data 선언과 바인딩

 

Vue js 를 설치하셨으면 app.vue 파일로 가서 필요 없는 부분을 지워준 뒤, 테스트를 진행합니다.

 

Vue js 2 의 데이터는 다음과 같이 선언합니다.

<template>
  <div>
      {{ data1}}
      {{ data2 }}
      {{ data3 }}
      {{ data4 }}
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      data1 : 'ABC',
      data2 : 123,
      data3 : {},
      data4 : []
    }
  }
 
}
</script>

data()함수를 생성하여 데이터를 원하는 타입으로 선언 한 뒤,

 

html 코드에서 {{ data 값 }} 으로 바인딩 할 수 있습니다.

 

기존 자바스크립트에서는 document.getElementById('id').innerHTML= 'data'; 로 바인딩을 했었는데 그것과 비교하면

 

아주 간단한 방식입니다.

 

추가적으로 Vue 에서 html 작성 시 반드시 <template> 안에 <div>로 감싸줘야 잘 동작 합니다.