<template>
  <img alt="Vue logo" src="./assets/logo.png">
</template>

<script>

export default {
  name: 'App',
  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>

• template에다가는 HTML, CSS 하던 것 처럼 짜면 된다.

Data Binding

• JS 데이터를 HTML에 꽂아 넣는 문법을 Data Binding이라 한다.

<script>

export default {
  name: 'App',
  data() {
    return {

    }
  },
  components: {
  }
}
</script>

• script 부분에 data() 라는 곳에 잘 넣어두면 데이터를 보관하면서 꺼내 쓸 수 있다.
• 데이터는 object 자료형으로 저장한다.

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4> 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,
    }
  },
  components: {
  }
}
</script>

• 지린다.
• 데이터 바인딩을 하는 이유
  • 하드 코딩시 가변적인 데이터를 수정하는 것은 어렵다.
  • Vue의 실시간 자동 렌더링 기능을 사용해야 효율적인 웹개발이 가능하다.
• 자주 변할거 같은 데이터들은 데이터로 보관하고 HTML에 {{}}로 바인딩해버리면된다.
• 안바뀌는 데이터는 구지 이렇게 바인딩할 필요는 없다.

data() {
    return {
      price1 : 60,
      price2 : 70,
      style: "color : blue"
    }
  },

• 추가로, 데이터에 style도 든든하게 박아두면

<h4 :style="style"> XX 원룸 </h4>

• :을 사용해서 해당 오브젝트를 주면 적용된다.

• So Awsome !