[Vue] 데이터 바인딩

{{데이터바인딩}}
JS데이터를 html 에 꽂아넣는 문법

💡 데이터바인딩을 왜 하느냐?

• 이유 1 : HTML(뷰에서는 템플릿)에 하드코딩(바로 값을 저장)해놓으면 나중에 변경이 어렵다.( 자주 변하는 데이터들을 데이터로 보관하고 html에 {{꽂아넣기}})
• 이유 2 🔥 : vue의 실시간 자동렌더링을 사용하기 위해. (데이터를 변경하면 뷰는 신기해서 데이터 변동사항을 실시간으로 반영시킴)
  => 웹앱과 같은 사이트를 만들기에 좋음.

💡 어떻게 사용하는가?

1. 자주 변경될 데이터들은 밑에 저장해두었다가
2. {{데이터 바인딩}}

html 속성도 데이터바인딩이 가능하다. style 같은 것도 가능한데
:속성="데이터 이름" 이렇게 가능하다.(예시는 아래를 참조)

<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>
// html에서는 아래와 같이 코드를 사용했었다.
//document.getElementById().innerHTML = ??

export default {
  name: 'App',
  **data() {
    return {
      //여기에 데이터보관하기
      // 데이터는 object 자료로 저장할 것
      // object 자료란, {자료이름:자료내용} 이렇게 쓰라는 뜻.
      price1 : 60, 
      price2 : 70,
      스타일 : 'color : blue',
    }
  }**,
  components: {
  }
}