Vue.js 데이터 바인딩

1. 데이터 바인딩 쉬움
데이터 담는 변수 만들고 {{ 데이터바인딩 객체 }} 이렇게 선언하면 끝남.

2. 데이터 바인딩 하는 이유
1) HTML에 하드코딩 해놓으면 나중에 변경 어려움
2) Vue의 실시간 자동 렌더링 쓰려면 필요

3. HTML 속성도 데이터 바인딩 가능...
이때는 속성 앞에 ':' 이거 붙여줘야 함. Vue 문법임.
ex) 

<p :style="my_style">

 

4. style 속성 데이터바인딩

<div :style="{color : 'red'}">
</div>

<div
      class="post-body"
      :style="{ backgroundImage: `url(${post.postImage})` }">
</div>

<div :style="`background-image:url(${curImgUrl})`"></div>

 

5. 클래스명 데이터 바인딩 + 기존 클래스명 사용법 예시

<div :class="filter + ' filter-item'"></div>

    filter는 데이터 바인딩
    filter-item 은 기존 클래스명