1. Vue 까먹었음 다시 보는 기초문법 - WastepaperBasket/Vue.js GitHub Wiki
평소에 HTML CSS 로 웹페이지 개발하던 대로 쭉 코드 짜다가
필요한 순간순간 Vue문법을 첨가하면 끝! 절대로 어려운게아님.
data(){} 이 부분은 리액트에선 state 라고 부름!
- UI 만드는 2 STEP
1. 시작전 class 명
2. 애니메이션 끝난 후 class 명
3. 그리고 원할때 2번 class 명 부착
클래스명 조건부로 넣으려면
{ 클래스명 : 조건}
혹은
1. 애니메이션 주고싶은 요소를
<Transition name="작명"></Transition>
2. class명 3개 작성
.작명-enter-from //시작
.작명-enter-active
.작명-enter-to //끝
퇴장?
.작명-leave-from //시작
.작명-leave-active
.작명-leave-to //끝
- 현재 HTML UI의 상태를 데이터로 저장해둠 (지금 보이는지 안보이는지 이런거)
- 그 상태에 따라 HTML UI을 보여줄지 말지를 Vue문법으로 작성함
- Vscode 부가기능 설치쪽에 잘보면 있지만, 또 적는다
- Vetur
- Vue 3 snippets
- HTML CSS Support
npm install -g @vue/cli
vue create 프로젝트 명
npm run serve / vue serve
{{ price1 }}
data(){
return {
price1 : 60,
style : 'color:red'
}
}
- v-for="작명 in 반복할 횟수" :key="작명"
- v-for="(작명,i) in 반복할 횟수" :key="작명"
<button @click="increase()">님 신고</button>
<span>신고수 : {신고수}</span>
data(){
return {
신고수 : 0,
},
}
methods : {
increase(){
this.신고수 += 1
}
}
data(){
return {
모달열림 : true,
}
}
<div class="black-bg" v-if="모달창열렸니 == true">
<div class="white-bg">
<h4>상세페이지</h4>
</div>
</div>
(room.js)
room.js
export default room.js
import data from './room.js파일경로'
data(){
return {
room : data
}
}
혹은 ,
(room.js)
var apple = 10;
var apple2 = 100;
export { apple, apple2 }
import { apple, apple2 } from './oneroom.js파일경로'
- 컴포넌트.vue 이름은 귀찮게 2단어 이상으로 작명해야합니다 안그러면 에러로 잡아줌
package.json//
"rules": {
"vue/multi-word-component-names": "off"
}
어쩌구.vue 파일을 1. import하고 2. 등록하고 3. 쓰기
import Discount from './Discount.vue 경로'
export default {
data() {
},
components : {
Discount,
}
}
<Discount>
<Discount/>
- props라는 문법 3-step
1. 보내고 2. 등록하고 3. 써야합니다.
<Modal :작명="하단의데이터이름" />
- 그 다음, 자식 컴포넌트
(Modal.vue)
<script>
export default {
name : 'Modal',
props : {
작명 : Array,
}
}
</script>
혹은 오브젝트 통째로 보내기
<Discount v-bind="오브젝트명" />
"데이터를 사용하는 컴포넌트들 중 최상위 컴포넌트에다가 데이터를 만들어놔야함"
- 컴포넌트로 많이 쪼개면 props 보내는거 귀찮으니까
만들기 전에 "만들면 이득이 있을까" 라는 생각을 해보고 만들자
-
자식은 $emit(작명, 전달할자료) 이렇게 부모에게 메세지를 보낼 수 있음 부모까지 자료를 전달하고 싶으면 선택적으로 기입가능
-
부모는 @작명="데이터변경하는JS코드"
(Card.vue)
<template>
<div>
<img :src="a.image" class="room-img">
<h4 @click="$emit('openModal', 원룸.id)"> {{a.title}} </h4>
<p>{{a.price}} 원</p>
</div>
</template>
(App.vue)
<Card @openModal="모달창열렸니 = true; 누른거 = $event" />
custom event 문법으로 부탁을 하셔야합니다. $emit(작명, 전달할자료) 이렇게 사용!
부모는 <자식컴포넌트 @작명="부탁받으면할일"> 이렇게 해주기
- 사용자가 에 입력한 값을 data로 저장하고 싶으면
<template>
<input @input="month = $event.target.value">
혹은
<input v-model="month">
</template>
<script>
export default {
data(){
return {
month : 0
}
}
}
</script>
export default {
data(){
return {
month : 1
}
},
watch : {
month(a){
if (a > 12) {
alert('13이상 입력하지마')
}
}
}
}
methods : {
priceSort(){
this.원룸들.sort(function(a,b){
return a - b
})
}
}
data(){
return {
room원본 : data,
room : data
}
}
methods : {
sortBack(){
this.room = this.room원본
}
}
this.room = this.room원본 이런거 하시면
"오리지널데이터를 저기 집어넣어라~"라는 뜻이 아니라
"room & room원본 서로 값을 똑같이 공유해주세요~" 라는 뜻입니다.
그래서 이 상태에서 room.sort()를 하시면 원룸들도 정렬되고 원룸들오리지널도 정렬됩니다.
그래서 오리지널 데이터를 제대로 보존할 수 없습니다.
data(){
return {
원룸들오리지널 : [...data],
원룸들 : [...data]
}
}
methods : {
sortBack(){
this.원룸들 = [...this.원룸들오리지널]
}
}
- 중간중간에 코드를 실행시키고 싶을 때가 있음!
(App.vue)
<p>지금 결제하면 {{amount}}% 할인</p>
(App.vue 하단 데이터만드는 곳)
data(){
return {
amount : 30,
}
}
(App.vue 하단)
mounted(){
setInterval(()=>{
this.amount--;
}, 1000);
}
-
현재 탭의 상태를 data로 저장 (지금 몇번째 내용이 보여야하는지)
-
data에 따라서 HTML 어떻게 보여야하는지 작성
data(){
return {
step : 0
}
}
기록해둘 데이터 저장
<div v-if="step == 0">내용0</div>
<div v-if="step == 1">내용1</div>
<div v-if="step == 2">내용2</div>
<button @click="tab == 0">버튼0</button>
<button @click="tab == 1">버튼1</button>
<button @click="tab == 2">버튼2</button>
끝