Vue 데이터 바인딩 문법

데이터 바인딩 

: JS 데이터를 HTML에 꽂아 넣는 문법

1. 쌩자바스크립트 스타일 데이터 바인딩

document.getElementById().innerHTML = ??

2. 뷰 데이터 바인딩

{{ 데이터 이름  }}

ex )

export default {

  name: 'App',

  data() {

    return {

      price1 : 60

    }

  },

  components: {

  }

}

--> 데이터를 이렇게 저장해놓고

 

<template>

  <div>

    <h4>XX 원룸</h4>

    <p>{{ price1 }} 만원</p>

  </div>

  <div>

    <h4>XX 원룸</h4>

    <p>XX 만원</p>

  </div>

</template>

--> {{ }} 안에 변수 이름을 써주면 끝!

 

* 이 문법을 왜, 언제 쓰는가?

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

2. Vue의 실시간 자동 렌더링 기능을 쓰기 위해 사용

* 그렇다면 쇼핑몰 이름도 데이터 바인딩 할까?

--> 애초에 바뀔 일이 없으니 안해도 된다.

 

결론 : Vue에서 자주 변경되는 데이터는 {{ 데이터 바인딩 }} 사용하기

 

# 참고 

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

ex )

export default {

  name: 'App',

  data() {

    return {

      price1 : 80,

      price2 : 70,

      스타일 : 'color : blue ',

    }

  },

  components: {

  }

}

--> 이렇게 데이터를 저장하고

 

<template>

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

  <div>

    다람쥐 원룸샵

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

    <p>{{ price1 }} 만원</p>

  </div>

  <div>

    <h4>XX 원룸</h4>

    <p>{{ price2 }} 만원</p>

  </div>

</template>

--> :속성 = "데이터이름" 이런 식으로 사용하면 된다.

 

출처 : 코딩애플