신입개발자_장민기

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 =..

{{ mesg }} v-on:[aaa] @[bbb] v-on:[ccc] @[aaa]="handleEvent2" export default { props:{ mesg: String }, data: function(){ return{ //data의 이름을 이벤트의 속성으로 지정하고 값을 이벤트 이름으로 사용 aaa:"click", bbb:"mouseover", ccc:"mouseleave" } }, // 이벤트 처리함수 등록 methods:{ handleEvent: function(data){ console.log("handleEvent", data) }, handleEvent2: function(data){ let a = JSON.parse(data.target.dataset.my2) console.log..

{{ mesg }} 다음 preventDefault 그냥 네이버 구글 target="_blank" 전송 export default { props:{ mesg:String, }, methods:{ prevent:function(e){ e.preventDefault(); //페이지 이동 X }, }, }

{{ mesg }} x() x().once 다음 y 네이버 y2 구글 prevent y2 target="_blank" aaa bbb ccc ddd keyup keyup.enter keyup.ctrl.enter keyup.ctrl.up export default { props:{ mesg:String, }, methods:{ y:function(){ console.log("yyyyyyyyy") }, y2:function(){ console.log("y2y2y2y2y2") }, aaa:function(){ console.log("aaaaaaaaaa") }, bbb:function(){ console.log("bbbbbbbbbb") }, ccc:function(){ console.log("ccccccccccc..

{{ mesg }} 값1: 값2: + 결과값: {{ result }} export default { props:{ mesg:String }, data:function(){ return { num1: 0, num2: 0, result: 0 } }, methods: { sum(){ this.result = parseInt(this.num1) + parseInt(this.num2); } } } {{ mesg }} 값1: 값2: + - * / 결과값: {{ result }} export default { props:{ mesg:String }, data:function(){ return { num1: 0, num2: 0, result: 0 } }, methods: { sum(data){ let c = data...

watch 속성 - 데이터가 변경되었을 때 함수가 자동 호출됨 - 반드시 함수명과 data 속성명이 일치해야 함 값: 변경: {{ num }} export default { data: function(){ return { num : 10 } }, /* 1. watch 함수명과 속성변수명이 동일해야 함 2. method와 computed는 명시적으로 호출해야 함 3. watch는 자동으로 호출 */ watch:{ num:function(changeValue){ //함수명과 속성 변수명이 동일 console.log("watch함수 실행", this.num, "\t", changeValue) } } }

{{ mesg }} {{book.name}} {{book.price}} 선택 교재: {{ book.name }} 전체 가격: {{ getTotal() }} 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:[], //선택된 책 목록 저장 total:0 //총액 } }, methods: { getTotal: function()..