Vue를 알아야 한다. - 데이터바인딩 문법

데이터바인딩 문법

바닐라 자바스크립트로 변수나 데이터를 HTML에 적용시키는 방법은 다음과 같다.

document.getElementById(어쩌구).innerHTML = 데이터;

근데 Vue는 그럴 필요없이 데이터보관을 해주고 그걸 {{데이터}}의 형태로
HTML 중간중간에 쉽게 데이터를 적용 시킬 수 있다.

• Data 속성
  컴포넌트의 data옵션은 함수다.
  이 함수는 하나의 객체만을 반환하며, Vue는 반응형 시스템으로 객체를 감싸 컴포넌트 인스턴스에 $data로 저장한다.

//데이터 보관 방식
<script>
  export default {
    name : 'App',
    data(){
      return {
        price1 : 60
      }
    }
  }
</script>

HTML 속성도 데이터바인딩 가능하다
:속성="데이터이름"

• 데이터 적용법

<template>
  <div>
    <h4 :style="스타일">XX 원룸</h4>
    <p>{{ price1 }} 만원</p>
  </div>
</template>

<script>
export default {
  name : 'App',
  data(){
    return {
      price1 : 60,
      스타일 : 'color:red'
    }
  }

데이터바인딩 문법을 사용하는 이유

1. html 하드코딩 해놓으면 나중에 변경이 어렵다.
2. 실시간으로 변경되는 web-app을 만들기 때문에 가변적인 데이터를 사용할 때 적절하다.
3. Vue 실시간 자동 렌더링 하기 위해서 사용한다.
   (데이터를 변경하면 변경사항이 html에 실시간으로 반영됨)