728x90
반응형
- 변수, 함수, 클래스, 인스턴스의 집합을 독립된 파일(~.js, ~.vue)로 만든 것
- 모듈로 만들어 필요한 기능만 여러 프로그램에서 재사용
- 모듈 내부에서 export 된 것만 외부 프로그램에서 사용 가능
- export : 개수와 상관없이 내보내기 가능
- export default : 기본 한 개만 내보내기 가능
[test.html]
body-script-type을 module로 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model.number="num1" />
<select v-model="op">
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" v-model.number="num2" />
<button v-on:click="doCal">계산하기</button>
<div v-cloak>{{result}}</div>
</div>
<!-- module타입: -->
<script type="module" src="./test.js"></script>
</body>
</html>type이 module이고 src가 해당 파일 경로로 적혀있다.
[test.js]
import { title, add, sub } from './test_module1.js';
// import { title, add, sub } from './test_module2.js';
console.log(title);
console.log(add(20, 10));
console.log(sub(20, 10));
new Vue({
el: '#app',
data: {
num1: 0,
num2: 0,
op: '-',
result: 0,
},
methods: {
doCal() {
if (this.op === '+') {
this.result = add(this.num1, this.num2);
} else {
this.result = sub(this.num1, this.num2);
}
},
},
watch: {
op(val) {
if (val === '+') {
this.result = add(this.num1, this.num2);
} else {
this.result = sub(this.num1, this.num2);
}
},
},
});js의 vue부분을 따로 뺐다. title, add함수, sub함수는 여기에 없는데 어디 있는 걸까?맨 위에 보니 test_module1.js에서 title, add, sub를 가져왔다.
방법1 : 일일이 export 하는 방법
[test_module1.js]
export const title = '계산기 모듈';
export function add(i, j) {
return i + j;
}
export function sub(i, j) {
return i - j;
}방법2 : export default로 객체로 만들어서 한 번에 보내는 방법(import할 때 임의 식별자 설정해줘야 함 ex)'cal'이라는 식별자라면 cal.title/cal.add/cal.sub)
[test_module2.js]
// default는 호출하는 곳에 기본으로 넘어간다.
export default {
title: '계산기 모듈',
add(i, j) {
return i + j;
},
sub(i, j) {
return i - j;
},
};export default { }는 객체가 되어버린다.
그럼 이 객체안의 내용이 전체 나가게 된다.
이름없이 객체를 넘겨주게 되면 내 마음대로 'cal'이라는 이름을 붙여서 넘겨줄 수 있다.
방법3 : 다 적고 한 번에 export { } 로 내보내는 방법
[test_module3.js]
const title = '계산기 모듈';
function add(i, j) {
return i + j;
}
function sub(i, j) {
return i - j;
}
export { title, add, sub };
component를 따로 빼서 import한다.
[test.html]
컴포넌트를 쓴다고 해야하니까 vue안에 components
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-comp></my-comp>
</div>
<template id="MyComp">
<div>
<h2>{{msg}}</h2>
</div>
</template>
<script type="module">
import MyComp from './components/MyComp.js'
new Vue({
el: "#app",
components: {
// MyComp: MyComp
MyComp
}
})
</script>
</body>
</html>컴포넌트도 따로 뺄 수 있다.
components/MyComp.js를 MyComp라는 이름으로 가져온다.
[MyComp.js]
export default {
template: '#MyComp',
data() {
return {
msg: 'hello module component',
};
},
};[기존 board에서 복잡한 코드 따로 빼기]
1. 파일을 만들고 이름은 명확하게 정한다 : board에서 list의 items
(board delete/board/board view/board cancel/board modify 등)
2. boardListItem.js export default와 template작성하기
export default {
template: `
<tr>
<td>{{article.articleno}}</td>
<td>{{article.subject}}</td>
<td>{{article.userid}}</td>
<td>{{article.hit}}</td>
<td>{{article.regtime}}</td>
</tr>
`,
};
3. <script type="module">로 바꾸기
4. boardList.html으로 boardListItem.js를 가져오기
import BoardListItem from "./boardListItem.js";
5. 컴포넌트로 등록하기
new Vue({
el: "#app",
component: {
BoardListItem
},
data() {
return {
articles: [], //배열로 뿌림
}
},
created() { //페이지 열자마자 바로 뿌리기 위해
axios.get(address) //axios로 주소 가져오고
.then((response) => {
console.log(response.data);
this.articles = response.data;
});
},
})6. 테이블에 컴포넌트 뿌리고 반복문 돌리기
<tr>
<board-list-item v-for="(article, index) in articles" :key="index"></board-list-item>
</tr>
7.props로 넘겨주기 :article="article" article이란 이름으로 반복문의 article넘겨주기
boardListItem.js에서 변수들이 쓰이는 데 여기엔 선언 안 되어 있음 -> props로 넘겨주기(bind로)
<board-list-item v-for="(article, index) in articles" :article="article" :key="index"> </board-list-item>
8. boardListItem.js에서 props로 받기
props: {
article: Object;
} //article이라는 이름을 Object로 넘어와
9. 결론: tr같은건 주로 따로 빼지 않는다..
728x90
반응형
'front-end > Vue.js' 카테고리의 다른 글
| API로 아파트 리스트 가져오기 (0) | 2022.07.28 |
|---|---|
| axios 비동기처리, Promise, async, await (0) | 2022.07.20 |
| Vue.js 컴포넌트 (0) | 2022.07.11 |
| Vue.js 이벤트 (0) | 2022.07.08 |
| Vue.js 인스턴스 속성(methods, filter, computed, watch) (0) | 2022.07.07 |
