Vue 데이터 바인딩 문법

1. Vue 데이터 보관 방법

<script>
export default {
  name : 'App',
  data(){
    return {
      price : 6000
    }
  }
}
</script>

 

2. HTML 중간에 넣는 방법

<template>
<div>
  맛있는 붕어빵
  {{ price }} 원
</div>
</template>

 

3.  App.vue 전체 코드

<template>
<div>
  맛있는 붕어빵
  {{ price }} 원
</div>
</template>

<script>


export default {
  name: 'App',
  data() {
    return {
      price: 6000
    }
  }
}
</script>

<style></style>

 

4. 쓰는 이유

- 실시간 렌더링 기능을 사용하기 위해서

- 웹앱 같은 효과를 주기 위해서

- HTML style, id, class도 데이터 바인딩으로 사용이 가능합니다.