v-bind 데이터 바인딩({{}}, :)
하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩
// 자바스크립트에서 데이터를 html문서에 넣으려면
document.querySelector().innerHTML = 데이터
// 뷰에서는
{{데이터명}}, :속성="데이터명"🤫 잠깐!데이터바인딩 왜 하는거야...?
1. 가변적인 데이터는 하드코딩하면 나중에 변경이 어렵다.
2. Vue는 저장한 데이터가 바뀌면 실시간 렌더링하는 기능이 있다!
자바스크립트에서는 데이터를 변수에 저장해서 사용했다.
뷰에서는 변수가 아닌 데이터를 저장할 공간을 만들고 그곳에 데이터를 저장한다.
data(){}
<script>안 data({return{key:value}})에 데이터를 저장!
단, object 형식으로 데이터 저장한다.
데이터는 일반 데이터 뿐만이 아니라 html 속성이나 클래스도 저장이 가능하다.
태그 안 데이터는 {{key}} 으로 사용할 수 있으며,
html 속성이나 클래스는 :속성="key"로 사용한다.
<template>
<div>
<h4 :style="fontColor">뭐뭐 원룸</h4>
<p>{{ price1 }} 만원</p>
</div>
<div>
<h4>뭐뭐 원룸</h4>
<p>{{ price2 }} 만원</p>
</div>
</template><script>
export default {
name: 'App',
// 데이터저장소! data()------
data(){
return{
price1 : 60,
price2 : 70,
fontColor:'color:blue',
products:['역삼동원룸','천호동원룸','마포구원룸']
}
},
//--------------------------
components: {
}
}
</script>
v-for 반복문
// Vue의 HTML 반복문
<태그 v-for="(**,##) in number" :key="##">🤫 잠깐! :key는 뭐야...?
반복한 요소들을 컴퓨터가 각각 구분짓기 위한 속성이므로 :key속성은 반복문 돌릴때 꼭 필요하다!
태그를 반복하고 싶으면 해당 태그에 v-for을 입력해 반복문을 사용할 수 있다.
<태그 v-for="** in number" :key="**">
- number는 반복할 횟수가 되며, **은 변수라서 자유롭게 작명하면 된다.
- -> number의 크기(횟수)만큼 해당 태그는 반복한다!
<태그 v-for="(**,##) in data" :key="##">
- number에는 숫자뿐만이 아니라 array, object 데이터도 넣을 수 있다.
in을 기준으로 왼쪽은 2개의 변수를 입력하고, 오른쪽은 데이터명을 입력한다.- **은 data 자료 갯수만큼 반복되며, 반복될 때 마다 data의 자료들이 된다.
- ##은 1씩 증가하는 정수가 된다.(0,1,2,...) 이 값을 관습적으로 :key 안에 집어넣는다.
<template>
<div class="menu">
<a v-for="(a,i) in 메뉴들" :key="i">{{ a }}</a>
<!-- 메뉴들 갯수만큼 반복되고 a는 메뉴들의 자료로 변경된다 -->
<!-- 왼쪽은 하나하나의 데이터 오른쪽은 1씩 증가하는 정수가 된다 -->
</div>
</template><script>
export default {
name: 'App',
data(){
return{
메뉴들:['Home','Shop','About']
}
},
components: {
}
}
</script>
👇객체를 반복!
<template>
<div v-for="( ele, idx ) in products" :key="idx">
<h4>{{ products[idx].name }}</h4>
<p>{{ ele.price }}만원</p>
<!-- ele는 products하나의 객체 자료 -->
</div>
</template><script>
export default {
name: 'App',
data(){
return{
products: [
{ name: '역삼동원룸', price: '50'},
{ name: '천호동원룸', price: '20'},
{ name: '마포구원룸', price: '40'}
]
}
},
components: {
}
}
</script>
v-if 조건문
v-if="조건"
조건이 true일때 실행된다.
v-else="조건"
위 조건이 true가 아닐때 실행된다.
모달창을 열고 닫기
1. 먼저 모달창의 상태를 변수에 저장해준다.(모달창의 상태가 true면 열림 / false면 닫힘)
2. h4제목을 누르면 모달창 상태가 true이므로 보이고,
닫기 버튼을 누르면 false라 보이지 않는다.
<template>
<div>
<div class="black-bg" v-if="모달창 == true">
<div class="white-bg">
<h4 >상세페이지</h4>
<p>상세페이지내용임</p>
<button v-on:click="모달창=false">닫기</button>
</div>
</div>
<h4 @click="모달창 = true">{{ products[idx].name }}</h4>
</div>
</template><script>
export default {
name: 'App',
data(){
return{
모달창: false,
}
},
components: {
}
}
</script>
조건부 리스트 렌더링
v-if와 v-for을 같이 써야하는 경우나 특정 배열만 나타내야 할 때가 있다.
<template>
<div>
<ul>
<li v-for="(ele,idx) in peolpe" :key="idx">{{이름}}</li>
</ul>
</div>
</template><script>
export default {
name: 'App',
data(){
return{
people : [
{이름: a, 고향: 서울},
{이름: b, 고향: 서울},
{이름: c, 고향: 경기},
{이름: d, 고향: 부산},
{이름: e, 고향: 경기}
]
}
},
components: {
}
}
</script>을 하면
- a
- b
- c
- d
- e
가 나올 것이다.
여기서 조건이 고향이 서울인 사람만 나타내고 싶으면
<template>
<div>
<ul>
<li v-if="people.고향==='서울'" v-for="(ele,idx) in peolpe" :key="idx">{{이름}}</li>
</ul>
</div>
</template>을 하면 될거같지만 'v-for과 v-if를 같은 태그 안에서 사용하면 안된다'는 오류가 날 것이다.
그럼 조건을 어떻게 걸면 좋을까?
filter 사용하기
<template>
<div>
<ul>
<li v-for="(ele,idx) in peolpe.filter((v)=>{v.고향==='서울'})" :key="idx">{{이름}}</li>
</ul>
</div>
</template>을 하면
- a
- b
가 나올 것이다.
v-if 사용하기
같은 태그 안에 사용하지 않기 위해 의미없는 태그를 <li>에 넣으면 조건부에 렌더링 되지만 <li>도 배열의 개수만큼 생성된다. => 불필요한 태그 생성
이럴때 <template>태그를 생성하고 감싸서 조건을 걸면 된다!
<template>
<div>
<ul>
<template v-for="(ele,idx) in peolpe" :key="idx">
<li v-if="people.고향==='서울'">{{이름}}</li>
</template>
</ul>
</div>
</template>