component : 화면을 구성하는 블록들, 일반적으로 header, content, footer로 구성
component 등록방법
Vue.component('컴포넌트 이름',{
//컴포넌트 이름
});
new Vue({
components: {
'컴포넌트 이름' : 컴포넌트 내용
}
});
<template>
//html 내용
</template>
<script>
//vue 내용
//객체 export
export default{
...
}
</script>
<style>
//css 내용
</style>
<script>
// 다른 모듈 import
//axios -> 백엔드 통신
import axios from 'axios'
//객체를 내보냄
export default{
//name - vue 객체 이름
name: 'ClassHeader',
// data - vue 객체 내부적으로 사용하는 변수 선언
data : function() {
return {
name: '',
classList: []
}
},
// method 정의
methods: {
getClassList() {
// 백엔드와 통신 - Http get 메서드로 요청
// get: 백엔드의 정보 저장
axios.get("http://localhost:8080/classes/" + this.$route.query.user_id // path + query
).then((res)=>{
// 통신 성공시 실행
this.classList = res.data // 데이터를 받아 변수에 저장
console.log(this.classList)
}).catch((err) => {
// 통신 실패시 실행
console.log(err);
});
},
CheckPage(classItem) {
// URL 이동, 히스토리 스택에 push하므로 뒤로가기 버튼 클릭시 이전 URL로 이동
// query : 해당 component로 값 전달 -> 경로 노출
// params : 해당 component로 값 전달 -> 경로 노출 x
this.$router.push({path : '/checks/', query : {user_id: this.$route.query.user_id, classIdx : classItem.classIdx, className: classItem.className}} );
},
ClassMain() {
this.$router.push({path: '/classes', query : {user_id:this.$route.query.user_id}});
}, UserPage() {
this.$router.push({path: '/user', query : {user_id:this.$route.query.user_id}});
}
},
// vue 인스턴스가 dom에 마운트된 직후 생성
mounted() {
// 이전 URL에서 전달받은 query를 변수에 저장
this.name = this.$route.query.user_id
this.getClassList()
}
}
</script>
method 호출 순서
this.$router.push({path: '이동할 URL', query: {data: data}, params: {data: data}}
<template>
<div class="head">
<header>
<div class ="head_lan">
<!-- 사이드바 구현 -->
<div class = main-nav-left>
<img id="menu_img" src="../../icons/menu_color.svg" alt="menu">
<div class = "sub-menu">
<div class ="class_menu">
<h3 style="cursor:default">출석부</h3>
<tr v-for="(classItem, classindex) in classList" v-bind:key="classItem.classIdx">
<!-- v if문 : 조건이 true일 시 실행-->
<div v-if="classItem.status == 'active'" class = "class_list">
<!-- vue data에서 선언한 변수에 접근 가능-->
<td style="cursor:pointer" @click="CheckPage(classItem)" id ="class_name">({{classindex + 1}}) {{classItem.className}}</td>
</div>
</tr>
</div>
</div>
</div>
<!-- 웹페이지 타이틀 -->
<img style="cursor:pointer" @click="ClassMain()" id="title_img" src="../../icons/title_color.svg" alt="title">
</div>
<!-- 웹페이지 우측 상단 메뉴 -->
<ul class="menu">
<!-- router-link : 라우터로 등록된 해당 URL로 이동-->
<li><router-link to='/login'><img id="logout_img" src="../../icons/logout_color.svg" alt="logout"></router-link></li>
<li style="cursor:default" id="mypage">{{ name }}</li>
<li id ="icon">
<img style="cursor:pointer" @click="UserPage()" id="user_img" src="../../icons/user_color.svg" alt="user">
</li>
</ul>
</header>
</div>
</template>
/*
scoped -> 해당 component에만 적용하도록 하는 옵션
scoped이 없을 경우 다른 compoent의 동일한 이름에 똑같이 적용되는 문제가 발생함
*/
<style scoped>
/*
생략 ...
*/
/*
사이드바 - 숨겼다가 마우스가 아이콘 위로 올라갈 시 나오게함
*/
.sub-menu{
z-index: 1;
width: 0;
height: 100%;
overflow: hidden;
background-color: rgba(73, 73, 232, 0.8);
transition-duration: 0.5s;
}
.main-nav-left:hover > .sub-menu{
height: 100%;
width: 300px;
overflow: hidden
}
/*
생략...
*/
</style>
<script>
import axios from 'axios'
// Header를 import함
import ClassHeader from './common/ClassHeader.vue'
export default {
name: 'ClassMain',
data : function(){
return {
classList : [],
};
},
// component로 ClassHeader 등록
components: {
ClassHeader
},
methods: {
getClassList() {
axios.get('백엔드 경로'
).then((res)=>{
this.classList = res.data
console.log(this.classList)
}).catch((err) => {
console.log(err);
});
}
}
}
</script>
<template>
<div id="all">
<ClassHeader />
</div>
</template>