예전에 배우다만 뷰js를 다시 시작하면서 그동안 배운것들을 다시 정리해본다.
# 프로젝트 생성
시작하면서 cmd에서 프로젝트부터 만들자.
이전에 뷰 설치는 npm install -g @vue/cli로 하고
익스텐션 vetur, html css support, vue 3 snippets설치하고 시작한다.
프로젝트 만드는건
cmd에 vue create 프로젝트명, 그리고 vue3을 선택한다.
그리고 프로젝트 이름을 vs코드로 열고 시작하자.
# 데이터바인딩
export default {
name: 'App',
components: {
},
data() {
return {
modalStatus : 0,
now : 0,
menus: ['Home', 'Shop', 'About'],
family: [
{name: '무찌', age: '두 살', Like: 0 },
{name: '도리', age: '한 살', Like: 0 },
{name: '나', age: '세 살', Like: 0 },
],
스타일: 'color : red;'
}
},
methods: {
sayHello() {
console.log('hello')
}
},
}
app.vue에 들가서 data부분이다.
저기에서 저렇게 데이터를 객체식으로 넣고
html에
<p>{{family[now].age}}</p>
이렇게 중괄호 두개로 묶어서 넣으면 데이터가 뿅 들어간다.
# 반복문 v-for
<div class="family" v-for="(a,i) in family" :key="a">
<h4 v-on:click="modalStatus = 1, now=i">{{ a.name }}</h4>
<p>{{ a.age }}</p>
<button v-on:click="a.Like++">Like</button> <span>Like : {{ a.Like }}</span>
</div>
이렇게 div박스에 v-for=~ 이렇게 치고 하면된다.
아까 데이터에 family라는 어레이를 반복하는데
a는 family어레이의 첫번째 인덱스부터 들어간다.
i는 숫자다.
{{a.name}}과
{{family[i].name}}은 같은값을 출력한다.
반복문에서 i를 설정하고 i를 안쓰면 에러뜨더라.
# v-if
모달창 만들때 썼는데
데이터에
return {
modalStatus : 0,
now : 0,
이렇게 데이터 만들어줬다.
modalstatus는 모달창 현재 상태고 0이면 꺼짐, 1이면 켜짐이다.
now는 현재 모달창이랑 연결된 데이터 인덱스다.
<div v-if="modalStatus==1" class="black-bg">
<div class="white-bg">
<h4>{{family[now].name}}</h4>
<p>{{family[now].age}}</p>
<button v-on:click="modalStatus=0">close</button>
</div>
</div>
모달창 html태그고
<div class="family" v-for="(a,i) in family" :key="a">
<h4 v-on:click="modalStatus = 1, now=i">{{ a.name }}</h4>
<p>{{ a.age }}</p>
<button v-on:click="a.Like++">Like</button> <span>Like : {{ a.Like }}</span>
</div>
이건 데이터 반복한건데
정리해서
반복태그에 h4의 v-on클릭하면 modalStatus가 1로 되서 모달창이 켜지고 동시에
now가 i 로 바뀐다.
모달창 html에선 데이터가 family[now].~~이렇게 되어있으니 현재 클릭한 데이터를 가져와서
보여주는거다.
# 이벤트, 함수
이벤트는 위에 이미 v-on으로 다 썼고
함수를 볼건데
export default {
name: 'App',
components: {
},
data() {
return {
modalStatus : 0,
now : 0,
menus: ['Home', 'Shop', 'About'],
family: [
{name: '무찌', age: '두 살', Like: 0 },
{name: '도리', age: '한 살', Like: 0 },
{name: '나', age: '세 살', Like: 0 },
],
}
},
methods: {
sayHello() {
console.log('hello')
}
},
}
export default로 객체 내보내는거에
methods 키값을 넣고 거기에 함수를 갖다넣으면된다.
sayHello()라는 함수가 있어서 콘솔에 헬로해주는 함수인데
html태그안에 버튼을 만들어서 이걸 클릭하면 저 함수 실행되게 해보려면
<button v-on:click="sayHello()">콘솔에 헬로</button>
v-on클릭이벤트로 넣으면 된다.
++ 추가
src어트리뷰트에 데이터 가져오려면
:src = '데이터'
스타일 속성에 데이터 박으려면
데이터 이렇게 넣고
이렇게 하면 된다.
즉 어트리뷰트에 데이터 가져오려면 :붙이고 하라는거임.
근데 이건 폴더경로를 데이터로는 못가져오더라..
암튼 끝
/////////////전체코드
<template>
<div class="menu">
<a v-for="a in menus" :key="a">{{ a }}</a>
</div>
<div v-if="modalStatus==1" class="black-bg">
<div class="white-bg">
<h4>{{family[now].name}}</h4>
<p>{{family[now].age}}</p>
<button v-on:click="modalStatus=0">close</button>
</div>
</div>
<!-- <p v-for="(a,i) in family" :key="a">{{a}}{{family[i]}}</p> -->
<div class="family" v-for="(a,i) in family" :key="a">
<h4 v-on:click="modalStatus = 1, now=i">{{ a.name }}</h4>
<p>{{ a.age }}</p>
<button v-on:click="a.Like++">Like</button> <span>Like : {{ a.Like }}</span>
</div>
<button v-on:click="sayHello()">콘솔에 헬로</button>
<p :style="스타일">바보</p>
</template>
<script>
export default {
name: 'App',
components: {
},
data() {
return {
modalStatus : 0,
now : 0,
menus: ['Home', 'Shop', 'About'],
family: [
{name: '무찌', age: '두 살', Like: 0 },
{name: '도리', age: '한 살', Like: 0 },
{name: '나', age: '세 살', Like: 0 },
],
스타일: 'color : red;'
}
},
methods: {
sayHello() {
console.log('hello')
}
},
}
console.log('hello vue')
</script>
<style>
body {
margin: 0;
}
div {
box-sizing: border-box;
}
.black-bg {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
padding: 20px;
}
.white-bg {
width: 100%;
background: white;
padding: 20px;
border-radius: 8px;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
.menu {
background: darkkhaki;
padding: 15px;
border-radius: 5px;
}
a {
color: white;
padding: 15px;
}
.family {
margin: 10px;
padding: 5px;
border-radius: 5px;
background: #eee;
}
</style>