반응형
데이터바인딩
js와 Vue의 데이터바인딩 문법
1. javascript의 경우
document.getElementById().innerHTML = 데이터;
자바 스크립트는 위와 같이 넣을 데이터를 우변에 넣고 태그를 가져와서 좌변에 쓴다.
2. vue의 경우
<script>
export default {
name : 'App',
data(){
return {
price1 : 60
}
}
}
</script>
vue는 데이터를 script안에 data안에 넣어준다. 그리고 html부분에 {{}}을 써서 데이터를 가져와서 사용한다.
데이터 바인딩을 하는 이유
- 정적 데이터가 아닌 이상 데이터는 계속적으로 변경된다. 그래서 데이터를 따로 저장해놓을 경우 수정이 편리해진다. js로 조작이 편리하다.
- Vue의 실시간 렌더링기능 쓰려면 데이터바인딩이 필요하다. Vue는 data가 변경되면 data와 관련된 HTML에 실시간으로 반영된다.
html속성에 데이터바인딩
style="" id="" class="" 등에도 data를 넣을 수 있다. 이 경우는 보통의 경우랑 다른 것은 스타일의 경우에는 앞에 :기호를 넣어주어야 한다.
<template>
<div>
<h4 :style="스타일">XX 원룸</h4>
<p>{{price1}} 만원</p>
</div>
</template>
<script>
export default {
name : 'App',
data(){
return {
price1 : 60,
스타일 : 'color:red'
}
}
}
</script>
반응형
반복문
리액트의 for, map, forEach대신에 vue는 v-for를 사용한다. v-for를 쓰면 원하는 만큼 HTML 태그를 복붙할 수 있다.
<div class="menu">
<a v-for="작명 in 3" :key="작명">Home</a>
</div>
- 우선 반복문을 실행할 태그에 v-for를 써준다.
- v-for="데이터 in 반복할횟수"를 작성해준다. ****
- 여기서 key는 리액트와 같이 랜더링하기 위해서 작성하는 것이다. 그래서 변화를 감지하여 어떤게 변화되었는지 알 수 있다. 그리고 :key필수로 들어가야 한다. 그렇지 않으면 오류가 발생한다.
배열에서 데이터 꺼내기
data(){
return {
메뉴들 : ['Home', 'Shop', 'About']
}
}
script에서 배열을 작성하면, 이를 반복문으로 돌릴 수 있다.
<div class="menu">
<a v-for="작명 in 메뉴들" :key="작명">Home</a>
</div>
반복시킬 횟수 적는 란에다가 array 자료를 집어넣는다.
1. 메뉴들안의 자료 갯수만큼 반복된다.
2. 작명한 변수는 반복될 때마다 메뉴들 안에 있던 자료들이 된다.
변수 여러개 사용하기
<div class="menu">
<a v-for="(작명,i) in 메뉴들" :key="i"> {{ 작명 }}</a>
</div>
저렇게 ()안에 변수를 두 개이상 사용가능하다. i는 인덱스로 key값으로도 사용가능하다.
반응형
