데이터 바인딩

<script>
export default {
  name: 'App',
  data(){
    return{
      // 데이터들 모두 모아두는곳 즉 데이터 보관함
      price1 : 60,
      price2 : 70,
    }
  },
  components: {
  }
}
</script>

뷰는 위처럼 data()라는 객체를 만들고 그 안에 return안에 object형식으로 필요한 데이터를 집어 넣으면 된다. 이 때 특이한점은 일반 javascript와 다르게 var, const, let을 선언해 주지 않고 바로 적는 모습이다.

<div>
    xx부동산
    <h4>xx매물</h4>
    <p>{{price1}} 만원</p>
  </div>
  
  <div>
    xx부동산
    <h4>xx매물2</h4>
    <p>{{price1}} 만원</p>
  </div>

선언한 데이터를 본문에서 사용하려면 위와 같이 중괄호 두개 안에 원하는 변수명을 적으면 된다. 이를 데이터바인딩이라고 하는데 데이터 바인딩을 하는데는 크게 두가지 이유가 있다.

• 본문에 하드코딩을 하면 나중에 변경하기가 어려움
• vue가 제공하는 실시간 자동렌더링 기능을 사용하기 위함
  • 실시간 자동렌더링이란 아래 data에서 값 변경 시 실시간으로 html에 반영되어 동작이 된다. 이는 웹앱이나, 실시간 데이터 변경이 자주 일어나는곳에 유용하게 사용됨

속성 데이터 바인딩

뷰에서는 해당 값 뿐만 아니라 style과 같은 속성 또한 바인딩이 가능하다.

아래와 같이 해당 속성값을 data에 선언을 하고 사용할 곳에 변수명을 작성하면 된다.

이 때 특이한점은 속성에서의 data변수는 중괄호를 두개 쓰는 대신에 해당 html에 속성값 앞에 : 를 붙인다. 아래 코드에서도 :style 이라고 선언했다.

	<div>
    xx부동산
    <h4 :style="스타일">xx매물</h4>
    <p>{{price1}} 만원</p>
  </div>

...

data(){
    return{
      // 데이터들 모두 모아두는곳 즉 데이터 보관함
      price1 : 60,
      스타일 : 'color : blue', 
    }
  },

배열 바인딩

아래 코드와 같이 data를 배열로 선언한 후 배열값에 따라 바인딩이 가능하다.

	<div>
    xx부동산
    <h4>{{products[0]}}</h4>
  </div>

  <div>
    <h4>{{products[1]}}</h4>
  </div>

  <div>
    <h4>{{products[2]}}</h4>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      // 데이터들 모두 모아두는곳 즉 데이터 보관함  
      products : ['역삼동원룸','천호동원룸','마포구원룸'],      
    }
  },
  components: {
  }
}
</script>