오늘의 5분 숙제 :
일단 이렇게 생긴 데이터를 하단에 하나 저장하십시오.
products : ['역삼동원룸', '천호동원룸', '마포구원룸']
▲ 그 데이터와 {{데이터바인딩}} 문법으로 대충 이렇게 생긴 HTML 레이아웃을 만들어오십시오.
가격은 대충 임시로 아무거나 기입하시길 바랍니다.
HTML에 자바스크립트 데이터를 꽂아넣고 싶을 때가 있습니다.
데이터바인딩이라고 하는데
Vue에서 데이터바인딩 하는 문법을 2개 알아보도록 합시다.
근데 애초에 데이터바인딩을 왜 하는지 의문점 부터 들지 않습니까.
그런거 궁금해해야 나중에 여러분 데이터 바인딩 할지 말지 스스로 판단하는 훌륭한 사람이 됩니다.
그것 부터 알아봅시다.
Vue 개발은 어려운게 아닙니다
어딜가나 이상한 문법부터 가르치니까 혼자 코드짜는거 어려워들 하시는데
그냥 평소에 HTML CSS로 웹페이지 개발하던 대로 쭉 코드짜시면 되고
필요한 순간순간 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라는 데이터도 원하는 곳에 꽂아넣을 수 있습니다.
상상하는 모든 속성에 데이터 꽂아넣기가 가능합니다.
-
Add a note