Vue 데이터바인딩 문법

원룸파는 쇼핑몰을 한번 만들어봅시다. 일단 레이아웃 부터요. 

 

<template>
  <div>
    <h4>XX 원룸</h4>
    <p>XX 만원</p>
  </div>
  <div>
    <h4>XX 원룸</h4>
    <p>XX 만원</p>
  </div>
</template>

HTML 코드들은 <template>안에 집어넣으면 됩니다.

 

자바스크립트 기능은 <script> 스타일은 <style> 안에 넣으십시오.

그래서 아무튼 저런 HTML을 추가하십시오. 배울 문법이 하나 있어서 그렇습니다. 

 

 

 

 

Vue의 데이터바인딩 문법

 

JavaScript로 자주 하는 짓거리가 있습니다.

자바스크립트 변수나 데이터를 HTML에 꽂아넣는 데이터바인딩입니다.

전통방식은 이렇게 길게 한줄 써야 데이터바인딩이 가능했습니다.

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

 

 

 

 

근데 Vue는 그럴 필요없이

1. 일단 데이터보관부터 어딘가에 하시고

2. 그걸 {{데이터}} 이런 문법으로 HTML 중간중간에 쉽게 꽂아넣을 수 있습니다. 

 

 

 

data보관함은 여기있습니다.

<script>
export default {
  name : 'App',
  data(){
    return {
      price1 : 60
    }
  }
}

</script>

script 태그 안에 data(){ return { } } 이걸 열고

 

데이터를 object 형식으로 저장하시면 됩니다.

이게 Vue의 data보관함, 변수보관함이라고 보시면 되겠습니다. 

중요한 데이터는 다 여기 보관하십시오. 중괄호니까 object 형식에 맞춰서요.

그럼 이제 price1 이라는 데이터를 HTML안에 꽂아넣어서 유저에게 보여주고 싶으면

{{ price1 }} 이것만 쓰면 됩니다.

 

 

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

저장하면 브라우저에 60만원이라고 잘 뜹니다.

 

 

 

 

Q. 뭐임 그냥 애초에 <p>60만원</p> 이렇게 하드코딩하면 되는데

굳이 데이터로 저장해뒀다가 왜 데이터바인딩함?

 

이유1. 쇼핑몰은 가격이 맨날 변동되지않습니까.

그걸 데이터로 저장해놓으면 수정이 나중에 편리합니다. 

JS로 조작이 쉽거든요

 

이유2. Vue의 실시간 렌더링기능 쓰려면 데이터바인딩 해놓으십시오

Vue는 신기해서 data가 변경되면 data와 관련된 HTML에 실시간으로 반영됩니다.

만약에 여러분이 price1을 60에서 70으로 조정하면

{{ price1 }} 에도 그 변경사항이 바로 적용된다는 소리입니다. 

따로 코드짤 필요 없이 자동으로 샥 바뀝니다. 

그리고 이런 사이트를 우리는 웹앱이라고 부릅니다.

 

 

그래서 웹앱 만들고 싶으면 좋은 말할 때 자주 바뀔 듯한 데이터들을 data란에 집어넣고

데이터바인딩해서 보여주시길 바랍니다. 

 

 

 

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

 

그니까 style="" id="" class="" 이런 것들에도

밑에 저장해둔 data를 꽂아넣을 수 있다는 것입니다.

 

<template>
  <div>
    <h4 :style="스타일">XX 원룸</h4>
    <p>XX 만원</p>
  </div>
  <div>
    <h4>XX 원룸</h4>
    <p>XX 만원</p>
  </div>
</template>

<script>
export default {
  name : 'App',
  data(){
    return {
      price1 : 60,
      스타일 : 'color:red'
    }
  }
}

</script>

이렇게 짜시면 color : red라는 데이터도 원하는 곳에 꽂아넣을 수 있습니다.

상상하는 모든 속성에 데이터 꽂아넣기가 가능합니다.