HTML에 데이터 꽂아넣는 Vue 데이터바인딩 문법

오늘의 5분 숙제 : 

일단 이렇게 생긴 데이터를 하단에 하나 저장하십시오. 

products : ['역삼동원룸', '천호동원룸', '마포구원룸']

 

▲ 그 데이터와 {{데이터바인딩}} 문법으로 대충 이렇게 생긴 HTML 레이아웃을 만들어오십시오. 

가격은 대충 임시로 아무거나 기입하시길 바랍니다. 

 

HTML에 자바스크립트 데이터를 꽂아넣고 싶을 때가 있습니다. 

데이터바인딩이라고 하는데

Vue에서 데이터바인딩 하는 문법을 2개 알아보도록 합시다. 

근데 애초에 데이터바인딩을 왜 하는지 의문점 부터 들지 않습니까.

그런거 궁금해해야 나중에 여러분 데이터 바인딩 할지 말지 스스로 판단하는 훌륭한 사람이 됩니다. 

그것 부터 알아봅시다. 

---

Vue 개발은 어려운게 아닙니다

 

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

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

우선 HelloWorld 글자 지우고 시작.

한 3개정도 있음.

어딜가나 이상한 문법부터 가르치니까 혼자 코드짜는거 어려워들 하시는데 

그냥 평소에 HTML CSS로 웹페이지 개발하던 대로 쭉 코드짜시면 되고

필요한 순간순간 Vue 문법을 첨가하면 됩니다. 

 

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

쇼핑몰 상품들 진열해보기.  (html 아래에 있는 코드 따라쳐주면 됨)

<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. 일단 데이터보관부터 어딘가에 하시고

(자바스크립트는 변수에다가 저장을 함)

뷰는 데이터 보관 통이 따로 있다.

그거 만들어주고

return 문 써줌

return 중괄호 안에다가 모든 데이터들 담아 놓기.

쇼핑몰에 저장할 가격 데이터 집어넣기. 

이름쓰고 데이터 저장하면 됨. 

중괄호니까 오브젝트 자료형 식으로 저장해놓으면 됨.

{ 이름 : 값 }

60 이라는 가격을 저장함. 

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

생성한 데이터를 html 자리에다가 집어넣고 싶은경우 

중괄호 2개 문법을 사용하기

= 콧수염이라고 부르기

데이터 이름만 넣어주면 됨.

---

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를 꽂아넣을 수 있다는 것입니다.

color:blue 를 데이터바인딩 하구 싶은 경우,

데이터 보관함에다가 저장을 함.

그리고 저 데이터 이름을 안에다가 넣어주면 끝.

데이터 바인딩을 html 속성에다가 하고 싶을 경우

콧수염 {{}} 을 치는게 아니라

콜론을 붙여준다.

---

<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라는 데이터도 원하는 곳에 꽂아넣을 수 있습니다.

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