app.vue 파일 초기 셋팅에서 필요 없는 부분일 일단 지우자
template 영역에 빨간 줄이 그어지는데, 안에 내용이 없으면 오류로 인식한다. 아무 내용 채우면 된다
- template : html 내용 담는 곳
- script : 자바스크립트 기능 담는 곳
- style : 스타일 지정
Vue의 데이터바인딩 문법
1. <script></script> 영역에
data() {
return {
}
}
를 추가하자.
데이터를 Object 형식으로 추가하면 된다.
해당 영역을 Vue의 data 보관함, 변수 보관함이라고 생각하면 된다.
저 XX 영역에 변수를 넣고 싶다면?
return 안에 오브젝트 형식으로 원하는 변수를 넣은 후,
<template></template> 안에 {{변수이름}} 이렇게 입력하면 된다.
<template>
<div>
<h4>XX 원룸</h4>
<p>{{price1}} 만원</p>
</div>
<div>
<h4>XX 원룸</h4>
<p>{{price2}} 만원</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
price1 : 100,
price2 : 200
}
},
components: {
}
}
</script>
HTML 속성 바인딩 하기
style 속성 값에도 데이터 바인딩을 하고 싶다면
:style="{데이터이름}"
데이터는 데이터 보관함에 똑같은 방식으로 저장하면 된다.
<template>
<div>
<h4 :style="styleColor">XX 원룸</h4>
<p>{{price1}} 만원</p>
</div>
<div>
<h4>XX 원룸</h4>
<p>{{price2}} 만원</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
price1 : 100,
price2 : 200,
styleColor : 'color:red'
}
},
components: {
}
}
⚡속성앞에 : 를 꼭 붙이는 걸 잊지 말자. 가끔 까먹는다.
Array 형식의 데이터를 바인딩하려면?
<template>
<div>
<h4>{{products[0]}}</h4>
<p>10만원</p>
</div>
<div>
<h4>{{products[1]}}</h4>
<p>20만원</p>
</div>
<div>
<h4>{{products[2]}}</h4>
<p>30만원</p>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
products : ['역삼동원룸', '천호동원룸', '마포구원룸']
}
},
components: {
}
}
</script>
근데 뭔가.. for 문을 돌리고 싶다.
for 문은 다음 글에서 정리하도록 하자.
'Vue3 > 코딩애플 part1' 카테고리의 다른 글
[Vue/코딩애플/part1] 5. 실제 데이터 넣어 상품 목록 만들기 (import / export) (0) | 2024.07.26 |
---|---|
[Vue/코딩애플/part1] 4. Vue 에서 모달창 만들기 (0) | 2024.07.24 |
[Vue/코딩애플/part1] 3. 이벤트 핸들러로 click 감지하기 (2) | 2024.07.24 |
[Vue/코딩애플/part1] 2. Vue 반복문 v-for (4) | 2024.07.24 |
[Vue/코딩애플/part1] 0. vue 개발 환경 셋팅 (0) | 2024.07.18 |