[Vue] vuedongsan 데이터 바인딩

Vue Data binding

뷰의 실시간 자동 렌더링 기능을 이용하려면 데이터 바인딩을 적극 활용하면 된다.
Vue는 data가 변경되면 data와 관련된 HTML도 실시간으로 반영(재 랜더링)된다.

자주 변하는 데이터들은 데이터로 보관하고 HTML에 {{꽂아넣는다}}

데이터 바인딩

Vanilla JS 문법

document.getElementById(어쩌구).innerHTML = 데이터;

vue 문법

데이터를 어딘가에 보관하고, {{ 데이터 }} 문법으로 꽂아 넣는다.

{{콧수염}}

예제

<template>
    <h4>XX 원룸</h4>
    <p>{{price}} 만원</p>
</template>
export default {
  name: 'App',
  data(){
    return {
      // 데이터 보관함
      price1 : 60,
    }
  },
  components: {
  }
}

HTML 속성 바인딩

HTML 모든 속성도 데이터 바인딩이 가능하다.
HTML의 속성을 바인딩 할때에는 {{콧수염}} 이 아니라 : 콜론을 붙여준다.

<h4 class="red" :style="스타일">XX 원룸</h4>

export default {
  name: 'App',
  data(){
    return {
      스타일 : 'color:blue',
    }
  },
  components: {
  }
}

예제

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4>{{products[0]}}</h4>
    <p>50 만원</p>
  </div>
  <div>
    <h4>{{products[1]}}</h4>
    <p>70 만원</p>
  </div>
  <div>
    <h4>{{products[2]}}</h4>
    <p>70 만원</p>
  </div>
</template>

export default {
  name: 'App',
  data(){
    return {
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
    }
  },
  components: {
  }
}