신입개발자_장민기

라우터란?? 라우터란 한 마디로 '연결 장치'이다. server.js 한 파일에서만 런칭하는 것이 아니라 router를 이용하여 여러 .js 파일에 원하는 코드를 짤 수 있다는 것이다. router를 이용하는 이유는 코드의 간략화 + 가독성 때문이다. server.js 하나에 넣으면 길이도 길어지고 가독성이 떨어진다. 수정하기도 힘들어진다. 이런 문제를 해결하기 위해 router를 쓰면 편리하게 코딩을 할 수 있다. App.vue App에서 라우팅 연습 Home login //컴포넌트 import가 없음 //모든 라우팅 주소는 router 설치 후 //라우터 설치할 곳> npm install vue-router@3 //router.js 생성 후 주소를 router.js파일에 등록함 //router를 ma..

DeptList {{ mesg }} 부서번호 부서명 부서부서위치 {{ dept.deptno }} {{ dept.dname }} {{ dept.loc }} import eventBus from "./eventBus.vue" --------- 추가 -------- import axios from 'axios'; export default { //npm install --save axios cmd창에서 실행 //spring에서 AngularDeptWeb 실행 //http://localhost:8016/app/으로 요청 props:{ mesg:String, }, data:function(){ return{ list:[] //부서목록 저장 } }, created:function(){ eventBus.$on("xy..

스프링에서 서버를 가동한 상태에서 실행 CMD에서 npm install –-save axios (복붙 X)(axois도 있으니 조심) HW {{ mesg }} 부서번호 부서명 부서부서위치 {{ dept.deptno }} {{ dept.dname }} {{ dept.loc }} import axios from 'axios'; export default { //npm install --save axios cmd창에서 실행 //spring에서 AngularDeptWeb 실행 // http://localhost:8016/app/로 요청(Spring을 실행한 창에서 복붙) props:{ mesg:String, }, data:function(){ return{ list:[] //부서목록 저장 } }, created..

App.vue {{ A.message }} import HW from './components/HW.vue' export default { components:{ HW, }, data:function(){ return { A:{ header:"오바마", footer:"우리의 친구", message:"message" } } } } HW.vue {{ mesg }} {{ headerText }} {{ footerText }} export default { props:{ mesg:String, headerText:String, footerText:String, } } .content{ color:aqua } .footer{ color: blue; } App.vue {{ A.header }} {{ A.messag..

App 아름다운 밤 import HW from './components/HW.vue' export default { components:{ HW, } } HW {{ mesg }} export default { props:{ mesg:String }, }

App input {{ mesg }} list {{ mesg }} {{ name }}삭제 {{ nameList }} import eventBus from './EventBus.vue'; export default { props:{ mesg:String }, created:function(){ eventBus.$on("name", this.recevie); }, data:function(){ return { nameList:[] } }, methods:{ recevie(v1){ this.nameList.push(v1); }, deleteBtn:function(n){ console.log(n); this.nameList.splice(n, 1); } } }

App.vue import HW from "./components/HW.vue" import HW2 from "./components/HW2.vue" export default { components:{ HW, HW2 }, } EventBus import Vue from 'vue' var eventBus = new Vue() //이벤트 버스 생성 export default eventBus; HW.vue {{ mesg }} HelloWorld2로 이벤트 전달 import eventBus from './EventBus.vue'; //1. import export default { props:{ mesg:String }, methods:{ x:function(){ console.log("x 호출"); even..

App.vue import HW from './components/HW.vue' export default { components:{ HW }, data: function(){ return { } }, methods: { //4. 자식의 정보를 출력하는 이벤트 함수 생성 receive1: function(){ console.log("부모가 xyz이벤트를 받아 receive1 발동"); }, receive2: function(value1, value2){ console.log("부모가 xyz2이벤트를 받아 receive2 발동"); console.log(value1) console.log(value2) }, } } HW.vue {{ mesg }} 부모에게 데이터 전달 1 부모에게 데이터 전달 2 expor..

{{ mesg }} 가격: 개수: 10 20 30 총 개수: {{ result }} export default { props:{ mesg:String }, data:function(){ return { num: 0, quantity: 10, result: 0 } }, methods: { sum: function(){ this.result = this.num * this.quantity; } } }

{{ mesg }} {{ book.name }} {{ book.price }} 삭제 선택 삭제 export default { props:{ mesg:String }, data:function(){ return { BookList: [ {name:"자바의 정석", price:3000}, {name:"jsp 정석", price:4000}, {name:"spring 정석", price:5000}, {name:"jquery 정석", price:6000}, {name:"angular 정석", price:7000}, ], books: [] } }, methods: { deleteBook(idx){ this.BookList.splice(idx,1); }, deleteSelected(){ for (let index =..