vue_20220124
- 프로젝트 생성
-- 1. nodejs 다운로드 v16.13.1
https://nodejs.org/ko/
-- 2. CMD를 열고 Node.js 기반 vue 프로젝트 생성 프로그램 설치
CMD> npm i vue @vue/cli -g
-- 3. 설치 확인
CMD> vue --version
4.5.15설치됨.
-- 프로젝트 생성(node_modules가 자동으로 생성)
CMD> vue create vue_20220124
-- 프로젝트를 실행하기 위한 폴더 이동
-- package.json, package-lock.json파일이 있는 폴더로 이동하기
CMD> cd vue_20220124
-- router 사용
CMD> npm install vue-router@next --save
-- store 사용
CMD> npm install vuex@next --save
-- axios 사용
CMD> npm install axios --save
-- element-plus ui 사용
CMD> npm install element-plus --save
-- 서버구동
CMD> npm run serve
index.js
- 라우터 설정
-
npm install vue-router@next --save
-
파일명 : src/routes/index.js
import { createWebHashHistory, createRouter } from "vue-router"; -
라우트 설정하기
import Home from '@/components/Home.vue';
import Board from '@/components/Board.vue';
import Login from '@/components/Login.vue';
const routes = [
{ path : '/', name: "Home", component:Home},
{ path : '/board', name: "Board", component:Board},
{ path : '/login', name: "Login", component:Login},
]- 라우터 생성(주소표기방식, 라우터설정변수)
const router = createRouter({
history : createWebHashHistory(), // 127.0.0.1:8080/#/login ('#' 붙음)
routes : routes // 위의 routes와 이름 같게 해야함
})- 라우터 이동경로 확인(이동하는페이지, 이동전페이지, 다음페이지로 이동)
router.beforeEach((to, from, next)=>{
console.log('이동하는페이지 : ', to);
console.log('이동 전 페이지 : ', from);
next(); // 다음페이지 이동
})export default router;
main.js
- 여기에 추가
import { createApp } from 'vue';
import App from './App.vue';
import routes from './routes/index.js';
// 1. 객체생성
const app = createApp(App);
// *** 2. 여기에 필요한 라이브러리 설정하기
app.use(routes);
// 3. 마운트
app.mount('#app');Login.vue
- vbase-3-
- ver 3.0 문법 사용
- ver 3.0 문법 사용
- 앞으로 리액트 사용할때 편리하기 위해서 조금 다른 문법을 씀
- 상태변수를
data()에 넣지않고setup()에 넣음 - 메소드도
setup()안으로, 리턴값 필수 reactive를import해줌 (자동으로 하는듯함)return값을 줘야함
: ex>return {state, handleLogin}
Login.vue 전체코드
<script>
import { reactive } from '@vue/reactivity'
export default {
// 이제 여기에 함
// ver 3.0
setup () {
// this를 사용할수 없음
const state = reactive({
userid : 'aaa',
userpw : 'bbb'
});
const handleLogin = () => {
// alert('로그인 버튼 클릭!');
console.log('로그인버튼 클릭', state.userid, state.userpw);
};
// 리턴값 필수
return {state, handleLogin}
},
// 상태변수 원래 이렇게 함.
// data(){
// return{
// state : {
// userid : 'aaa',
// userpw : 'bbb'
// }
// }
// },
// 메소드 위치도 setup 안으로
// methods:{
// handleLogin(){
// // 백엔드 연동
// }
// }
}
</script>Board.vue
<template>
<div>
<h3>Board.vue</h3>
{{ state.items.result }}
<table border="1">
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
</tr>
<tr v-for="tmp in state.items.result" :key="tmp">
<td>{{tmp.no}}</td>
<td>{{tmp.title}}</td>
<td>{{tmp.writer}}</td>
<td>{{tmp.hit}}</td>
</tr>
</table>
</div>
</template>
<script>
import { onMounted } from '@vue/runtime-core'
import { reactive } from '@vue/reactivity'
export default {
// onCreate에 해당
setup () {
const state = reactive({
items : {},
});
onMounted(() => {
// 백엔드로부터 데이터를 받음
state.items.result = [
{no:1, title:'가1', writer:'a', hit:5},
{no:2, title:'나1', writer:'b', hit:7},
{no:3, title:'다1', writer:'c', hit:9}
];
});
// console.log(state.items.result);
return {state}
}
}
</script>
<style lang="scss" scoped>
</style>Admin.vue
+ admin/Menu1.vue
- props
- 하위 컴포넌트로 값을 넘김
:<menu-1 v-if="menu.code === 1" title="admin/Menu1.vue"></menu-1>
= title과 count를 넘김 - 값을 넘길때는 배열화 시켜서 넘김
- ':'의 사용여부 체크
menu-1 v-if="menu.code === 1"
title="메뉴1"
:count="count.value"
@handleCount="handleCount"></menu-1>- title = "문자 그대로 넘김"
- :count = "count.value 라는 변수의 값을 넘김"
- @handleCount = "handleCount 라는 부모의 메소드를 넘김"
Admin.vue 전체코드
<template>
<div>
<h3>Admin.vue</h3>
{{menu}}
<button @click="handleMenu(1)">메뉴1</button>
<button @click="handleMenu(2)">메뉴2</button>
<button @click="handleMenu(3)">메뉴3</button>
<button @click="handleCount">1씩 증가</button>
<!-- <button @click="handleNext">다음페이지</button> -->
<hr>
<menu-1 v-if="menu.code === 1"
title="메뉴1"
:count="count.value"
@handleCount="handleCount"></menu-1>
<menu-2 v-if="menu.code === 2"
title="메뉴2"
:count="count.value"
@handleCount="handleCount"></menu-2>
<menu-3 v-if="menu.code === 3"
title="메뉴3"
:count="count.value"
@handleCount="handleCount"
@handleSub="handleSub"></menu-3>
</div>
</template>
<script>
import { reactive } from '@vue/reactivity';
import Menu1 from '@/components/admin/Menu1';
import Menu2 from '@/components/admin/Menu2';
import Menu3 from '@/components/admin/Menu3';
export default {
components : {
Menu1, Menu2, Menu3
},
setup () {
// state 변수설정
// menu.code
const menu = reactive(
{ code : 1 }
);
const count = reactive(
{ value : 1 }
);
// count.value 값이 1씩 증가
const handleCount = () => {
count.value++;
};
const handleSub = () => {
count.value--;
}
// handle 메소드
const handleMenu = (idx) => {
console.log(idx);
menu.code = idx;
}
return {menu, count, handleMenu, handleCount, handleSub}
}
}
</script>
<style lang="scss" scoped>
</style>/admin/Menu1.vue
- props
- 부모컴포넌트로부터 값을 전달 받음
:props : { title : String, count : Number },
= title과 count를 받음 <button @click="handleCount">부모 메소드 호출 후 값 증가</button>
: 일단 자식 메소드를 호출- 부모 메소드를 불러옴
:{emit}사용
:emit('handleCount',{});
= 빈부분은 함수 호출 값 자리
ex>handleMenu(1)의 1 자리
setup (props, {emit}) {
const handleCount = () => {
// 부모의 @handleCount="실제호출메소드"가 반응
emit('handleCount',{이부분은 호출 값 자리});
};
return {props, handleCount}
}admin/Menu1.vue 전체코드
<template>
<div>
<h3>Menu1</h3>
{{'props => '+props}}
<br>
{{'props.title => '+props.title}}
<br>
{{'props.count => '+props.count}}
<br>
<hr>
<button @click="handleCount">부모 메소드 호출 후 값 증가</button>
</div>
</template>
<script>
export default {
// 부모 컴포넌트에서 전달되는 값을 보관
props : {
title : String,
count : Number
},
setup (props, {emit}) {
console.log('props.title => ',props.title);
console.log('props.count => ',props.count);
const handleCount = () => {
// 부모의 @handleCount="실제호출메소드"가 반응
emit('handleCount',{});
};
return {props, handleCount}
}
}
</script>
<style lang="scss" scoped>
</style>
The best