[Vue.js] 데이터 바인딩

데이터 바인딩(Data-Bind)이란?

바인딩이란 묶는다는 의미로, UI를 통해 표시하고자 하는 데이터를 실제 데이터와 연결해주는 프로세스

 

{{ }} -> 가장 기본적인 삽입방식

v-bind -> html 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식

 

예시

<template>
  <div>
    <h4 v-bind:id="dataid">{{products[0]}}</h4>
    <p> {{price2}} 만원</p>
  </div>
  <div>
    <h4>{{products[1]}}</h4>
    <p>{{price1}} 만원</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){                                     //데이터 보관함
    return{
      price1 : 6,
      price2 : 70,
      dataid : 'hi',
      product : [ '양' , '원' ],
    }
  },
  components: {
    
  }
}
</script>

 

{{데이터바인딩}} 하는이유

1) HTML에 하드코딩해놓으면 나중에 변경 어려움 -> 가변적인 데이터를 사용

2) Vue의 실시간 자동 렌더링 쓰려고

    ->>데이터를 바꾸면 자동으로 html바꿔줌 스무스하게 웹앱처럼

 

자주 변할거 같은 데이터들을 데이터바인딩 사용!

변하지 않을 것 같은 데이터는 데이터바인딩이 아니라 하드코딩 해도 됨