📕 import export
어떤 외부데이터 더미를 따로 파일에 분리해두고 필요할 때 가져와서 사용할 수 있다.
import/export 문법을 이용해서 다른 js파일에 보관한 뒤 가져오도록 해보자.
(oneroom.js)
var apple = 10;
export default apple(App.vue)
import 어쩌구 from './oneroom.js파일경로'export default 옆에 내보낼 변수나 자료형 입력하면 되고
이걸 가져다가 쓰고싶으면 원하는 파일에서 import 작명 from 경로 적어서 사용하면 된다.
작명한 변수는 출력해보면 oneroom.js에서 export 했었던 10이라는 데이터가 나옴
- export default는 파일 맨마지막에 딱 한번 사용 가능
- import시 작명은 자유롭게 가능
export {} / import 문법
export 해야할게 많으면 export {} 문법을 사용한다.
(oneroom.js)
var apple = 10;
var apple2 = 100;
export { apple, apple2 }(App.vue)
import { apple, apple2 } from './oneroom.js파일경로'- export 원하는 만큼 사용 가능함
- 이걸 import 할 경우 작명이 불가능하고 export 했던 변수명 그대로 적어야함
data()에 데이터바인딩 응용
(oneroom.js)
export default 위에있던원룸데이터(App.vue)
import data from './oneroom.js파일경로'
data(){
return {
원룸들 : data
}
}<div>
<img src="">
<h4>{{원룸들[0].title}}</h4>
<p>{{원룸들[0].price}}</p>
</div>데이터바인딩 응용하면 이렇게 작성해주면 됨
📗 v-if / v-else 응용
v-if와 같이 사용할 수 있는 v-else가 있다.
개념은 if문과 똑같음
v-if 조건식이 참이 아니면 v-else를 실행해달라는 의미다.
<template>
<div v-if="1 == 2">
안녕하세요
</div>
<div v-else>
안녕하세요2
</div>
</template>조건에 따라서 보여주고 싶은 div 항목이 있을 때 사용한다.
<template>
<div v-if="1 == 2">
안녕하세요
</div>
<div v-else-if="1 == 3">
안녕하세요2
</div>
</template>자바스크립트 else if 문법처럼 조건식을 연달아 두개 세개 검사해보고 싶을 때 사용할 수도 있다.
📘 Component
[업데이트사항]
(업데이트사항)
이제 컴포넌트.vue 이름은 귀찮게 2단어 이상으로 작명해야함 안그러면 에러로 잡아줌
DiscountBanner.vue 이런 식으로 2단어로 작명해야함
귀찮으면 설정 꺼두는 방법도 있음
"rules": {
"vue/multi-word-component-names": "off"
} 한줄 추가하고 미리보기 껐다가 다시 띄우면 작동함
component 만들기
컴포넌트는 원하는 HTML 덩어리를 한 글자로 축약할 수 있게 도와주는 문법이다.
긴코드를 파일로 쪼개서 필요할 때 갖다 쓸 수 있게 모듈화 해주는것임
((컴포넌트 만들기))
(예를 들면 DiscountComp.vue)
<template>
축약할 HTML~~
</template>
<script>
export default {
name : '작명', // 디버깅용 이름
data() {
return { 넣을 데이터 }
},
}
</script>
<style>
넣을 스타일
</style>만드는 법은 간단하다.
어쩌구작명인데2단어이상.vue 파일을 하나 만들고 그 안에 축약할 HTML 내용을 넣어주면 된다.
.vue 파일은 항상 이런 형식으로 만들어야함.
(name : 어쩌구로 작명하는건 나중에 디버깅할 때 쓰는 이름인데 넣어도되고 안넣어도 되고)
그다음 원하는 곳에서 .vue 파일을
- import하고
- 등록하고
- 사용한다
세가지 스탭 모두 지켜줘야 에러 안뜸
component 사용하기
위에서 말한 3스탭대로 사용해보자.
(App.vue)
import Discount from './Discount.vue 경로' // 1단계 : import
export default {
data() {
},
components : { // 2단계 : 등록
Discount,
}
}<template>
<div class="banner">
<h4>지금 결제하면 20% 할인</h4>
<Discount /> // 3단계 : 사용
</div>
</template>- vue 파일을 import하고
- script 태그 안에 등록시킨다.
- template 안에서 원하는 부분에 자유롭게 갖다쓴다.
사용하는 이유
- div태그 여러개 있는거 정리하는데 탁월함
- 모듈화로 다른 곳에서도 HTML 재사용이 쉬워짐
- 나중에 라우터로 페이지 구분하고 싶으면 하나의 페이지는 하나의 컴포넌트로 만드는게 좋음
근데 컴포넌트 남발하면 데이터바인딩 해둔거 관리하기가 어려워진다.
부모 컴포넌트에서 바인딩 해뒀던 데이터가 갑자기 하위 컴포넌트로 따로 쪼개져서 템플릿에 낑겨있다면 거기에 걸려있는 {{데이터}}는 ?저는누구죠 해버림..
이런 부분은 props를 통해 해결해야함
📙 props
위에서 말한 부분을 해결하기 위한 props 파트 강의다.
하위컴포넌트로 데이터를 전송하려면 props라는 문법으로 보내면 된다.
props 보내는 것도 3-step이 있음
- 보내고
- 등록하고
- 사용한다
App.vue 안에 Modal.vue라는 컴포넌트가 있다고 가정할 때,
Modal은 하위 또는 자식 컴포넌트
App은 상위 또는 부모 컴포넌트라고 함
props는 무조건 일방통행이다. 위에서 아래로 내려감. 부모로부터 자식에게!
아래에서 위로는 절대 불가능.
3 steps
1. 보내기
(App.vue)
<Modal :원룸들="원룸들" />이렇게 데이터바인딩 문법 쓰면 데이터를 Modal 컴포넌트로 보낼 수 있다.
<Modal :작명="하단의데이터이름" />
보통 작명과 데이터이름을 통일하는 식으로 지음
([참고] vue에서 콜론:의 역할은 데이터바인딩 혹은 props 전송임)
2. 등록하기
(Modal.vue)
<script>
export default {
name : 'Modal',
props : {
원룸들 : Array,
}
}
</script>자식컴포넌트는 데이터를 받으면 props로 등록한다.
props: {}열고 거기에 아까 작명한 {데이터이름 : 자료형} 적어주면 됨
자료형엔 Array, Object, String, Number 등을 적으면 된다.
3. 사용하기
props 등록이 됐다면 HTML 안에서 자유롭게 데이터바인딩으로 사용하면 된다.
주의할 점은 props는 그냥 받아서 사용만 하는 read-only 데이터로 취급해야함.
수정 시도하면 에러난다. 수정 금지!
추가 Tip
props가 귀찮기 때문에 하위 컴포넌트 자체에 데이터를 만들어서 사용하면 안될까 하는 궁금증이 있다.
하지만 데이터를 만들 때 원칙이 있음
데이터를 사용하는 컴포넌트들 중 최상위 컴포넌트에 데이터를 만들어놔야함
이유는 데이터를 위로 전송하는건 매우 복잡하고 추적이 어렵기 때문이다.
그러니 상태관리를 위해 App.vue 같은 최상위에 저장해두고 props 사용하자.
props 응용
props를 보내는 여러가지 방법이 있다.
<Discount :데이터이름="[1,2,3]" />
<Discount :데이터이름="{ age:20 }" />
<Discount :데이터이름="100" />
<Discount 데이터이름="안녕하쇼" />각각 array, object, 숫자, 문자보내기임
콜론을 안붙이면 문자로 전달된다.
오브젝트 : {name : 'kim', age : 20} 이라는 object 자료가 밑에 있는데
이걸 name, age 각각 props로 보내고 싶으면
<Discount :데이터이름="오브젝트.name" :데이터이름="오브젝트.age" />이런식으로 적어야하는데 너무 번거롭다면,
<Discount v-bind="오브젝트명" />이런 v-bind문법을 사용해도 된다.
근데 이럴바엔 :오브젝트 = "오브젝트" 이렇게 보낼듯
