vue의 데이터바인딩 문법

html에 꽂아넣는 데이터바인딩 문법을 알아보자.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4 :style="스타일">xx 원룸</h4>
    <p>{{price1}} 만원</p>
  </div>
  <div>
    <h4>xx 원룸</h4>
    <p>{{price2}} 만원</p>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {//데이터 보관함
    return {
      price1 : 60,
      price2 : 70,
      스타일 : 'color : blue'
    }
  },
  components: {
  }
}
</script>

vue에는 데이터 보관함이 있는데, script태그안에 export default안에 data () { return {} }안에 데이터를 오브젝트 형식으로 넣어주면 되며, 사용할 땐, {{ 키값 }} 이렇게 중괄호 2개에 데이터이름만 적어주면 된다.

 

이렇게 {{ 데이터바인딩 }}을 하는 이유는 vue가 실시간 자동 렌더링을 하기 때문이다. 데이터바인딩은 그래서 실시간으로 변경되는 데이터들을 쓴다. 

 

그리곤 속성도 데이터바인딩이 가능하다. 데이터보관함에 이름 : '속성'을 쓰고,

html에 :style="데이터이름" 이런 식으로 :을 써주면 된다.