[코딩애플] Vue 로 만드는 직방 / 인스타그램 웹앱 - 클론코딩.2

https://www.youtube.com/watch?v=0BbF7UxKKvg&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=3

 

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

<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>

 

!!!데이터 바인딩 하는 이유!!!

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

2. Vue의 실시간 자동 렌더링 쓰려면 하셈

 

HTML 속성도 데이터바인딩 가능

 => :속성="데이터 이름"