신입개발자_장민기

Foo.vue(라우터 생성) Foo Foo에서 라우팅 연습 FooChild1 FooChild2 export default { props:{ id:String } } router.js //Import import Vue from "vue"; import VueRouter from "vue-router"; //컴포넌트 자식창 import Bar from './components/Bar.vue'; import Foo from './components/Foo.vue'; import Baz from './components/Baz.vue'; import FooChild1 from './components/FooChild1.vue'; /* 수정 */ import FooChild2 from './components/..

Baz.vue Baz props: {{ id }} $route.params.id:{{ $route.params.id }} {{ a() }} : {{ value }} export default { props:{ id:String //수정 }, data: function(){ return { value: ""} }, methods:{ a: function(){ var test=""; test=this.$route.params.id; //수정 console.log(">>>>>>>", test); this.value=test; //수정 } } } App.vue App에서 라우팅 연습 Home login /params:{id=aaa} export default { } router.js //Import import..

Baz.vue Baz props: {{ username }} $route.query.username:{{ $route.query.username }} {{ a() }} : {{ value }} export default { props:{ username:String //props로 사용 안 됨 }, data: function(){ return { value: ""} }, methods:{ a: function(){ var test=""; test=this.$route.query.username; console.log(">>>>>>>", test); this.value=test; return test; } } } App.vue App에서 라우팅 연습 Home login/abcd /my?username=이순..

Bar.vue {{ pw }} export default { props:{ pw:String } } Baz.vue Baz {{ pw }} export default { props:{ pw:String } } Foo.vue Foo props-od:{{ id }} $route.params.id={{ $route.params.id }} export default { props:{ id:String } } Knu.vue Knu userid= {{ userid }} export default { props:{ userid:String } } NotFound.vue {{ mesg }} not found! export default { props:{ mesg:String } } App.vue App에서 라우팅 연습 ..

라우터란?? 라우터란 한 마디로 '연결 장치'이다. 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); } } }