코딩애플 Vue3 직방, 인스타그램 웹앱 -- 2 데이터 바인딩

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

왜쓰는가?/

1. html에 하드코딩 해놓으면 나중에 변경 어려움...

2. vue의 실시간 자동 렌더링 쓰기 때문  -- data를 변경하면 관련된html에서 실시간으로 변경이 됨.

반대로 낮은 변경이 없는 데이터는 데이터 바인딩을 할 필요 없음.

3. html속성도 데이터 바인딩 가능 하나  문법은 ** :속성="데이터 이름"

<template>
  <img alt="Vue logo" src="./assets/logo.png">
<div>
  {{ logo }}
  <h4 class="red" style="color:blue;">XX 원룸</h4>
  <p> {{ price1}} 만원</p>
</div>
<div>
  <h4 :style="style">XX 원룸</h4>
  <p> {{ price2}} 만원</p>
</div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      //데이터 보관함...object자료로 저장 key:value 형식
      price1 : 60,
      price2 : 60,
      logo : '원룸샾',
      style : 'color:red;font-size:20px;',
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
    }
  },
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

   products : ['역삼동원룸','천호동원룸','마포구원룸'],

이것은 for문을 위한 숙제....ㅋㅋ