본문 바로가기

프로그래밍/VueJS

vuejs 의 서로 형제 관계인 컴포넌트 사이의 정보 전달 $emit 와 $on 사용 2019. 8. 1. vuejs 의 서로 형제 관계인 컴포넌트 사이의 정보 전달 $emit 와 $on 사용한다.이벤트 버스의 객체를 만들어 사용하면 되며, vue 인스턴스를 만들어 사용하면 된다. 데이터를 저장할 필요 있으면 데이터 옵션 추가 가능하다.이벤트를 수신하는 컴포넌트는 미리 이벤트 핸들러를 등록해 두어야 하며 , vue 인스턴스 생명주기의 created 이벤트 훅을 이용한다. vue 인스턴스가 만들어질때 $on 메소드를 사용해 이벤트 수신 정보를 등록해 두어야 한다. 이벤트를 발신하는 컴포넌트에서는 $emit 메소드를 호출한다. DOCTYPE html> 06-24 var eventBus = new Vue(); child1 button!! {{currentTime}} Vue.component('child1-compo..
Cannot find module 'webpack-cli/bin/config-yargs' 오류메시지 2018. 12. 3. npm run dev 를 실행했더니... Cannot find module 'webpack-cli/bin/config-yargs' 오류메시지가 나옵니다. simjaeun-ui-MacBook-Air:todolistapp01 simjaeun$ npm run dev > todolistapp@1.0.0 dev /Users/simjaeun/Desktop/vue/vuejs_book/ch11/todolistapp01> cross-env NODE_ENV=development webpack-dev-server --open --hot The CLI moved into a separate package: webpack-cliPlease install 'webpack-cli' in addition to webpack itse..
vue.js 의 axios 로 웹서비스 호출하기 2018. 5. 3. https://www.digitalocean.com/community/tutorials/how-to-use-vue-js-and-axios-to-display-data-from-an-api list.html DOCTYPE html> Cryptocurrency Pricing Application Cryptocurrency Pricing {{ index }} $ {{ result.USD }} € {{ result.EUR }} vueApp.js const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR"; const vm = new Vue({ el: '#app', data: { results: [] ..
VueJS 관련 샘플 사이트 2018. 4. 25. VueJS 관련 샘플 사이트http://www.vuescript.com/ http://vuejsexamples.com/ https://vuejsfeed.com/
vue.js 의 이전과 다음 화면 바인딩 하기 (template 사용) 2018. 3. 14. VUE.JS 소스이며, 이전 다음 버튼을 누르면 버튼 누른 엑션에 맞게, 이전 다음의 template 에 기재되어 있는 html 을 바인딩 처리 해 줍니다. DOCTYPE html> 06-16 .header { padding: 15px 15px 20px 15px; border-bottom: 1px solid #e5e5e5; } .header h3 { margin-top: 0; margin-bottom: 0; line-height: 40px; } 이전화면 이름 내용 저장하기 다음화면 {{ post }} Vue.component('next-post', { template: '#next-template', data: function () { return { posts: [ '권판진', '고은영', '이은주',..
emitter 무료 오픈 소스 실시간 메시징 서비스 2017. 9. 26. Emitter는 모든 장치를 연결 하는 무료 오픈 소스 실시간 메시징 서비스 입니다. publish-subscribe 메시징 API는 속도와 보안을 위해 제작되었답니다. (IoT, 게임, 앱 및 실시간 웹용 인프라)emitter.io는 MQTT 프로토콜을 기반으로 하고, 메시지 저장을 특징으로하는 분산 형, 확장 성 및 내결함성 publish-subscribe 메시징 플랫폼입니다. 낮은 대기 시간, 바이너리 메시징 및 높은 처리량에 대한 요구 사항을 충족시킴으로써 온라인 게임 및 모바일 응용 프로그램에 사용할 수 있습니다. 또한 대시 보드 또는 시각적 분석 또는 채팅 시스템과 같은 실시간 웹 응용 프로그램에도 사용할 수 있습니다. 또한 사물의 인터넷에 적합하며 센서를 제어하고 데이터를 수집 및 분석 할 ..
Vue.js 로 행추가(중급기술) 2017. 9. 10. https://codepen.io/jjelic/pen/yevNLZ No. Description Qty Price Tax Total {{ $index +1 }} 0% 10% 20% add row remove row TAX {{ taxtotal | currencyDisplay }} TOTAL {{ total | currencyDisplay }} DELIVERY GRANDTOTAL {{ grandtotal = total + delivery | currencyDisplay }} SUBMIT DATA {{ $data | json }} Vue.filter('currencyDisplay', { // model -> view read: function (val) { if (val > 0) { return account..
vue.js 로 행추가 및 삭제하기 2017. 9. 10. https://jsfiddle.net/7nxhygLp/ Name Job Remove Add row var app = new Vue({ el: "#app", data: { rows: [ {name: "James Bond",job: "spy"}, {name: "Goldfinger", job: "villain"} ] }, methods:{ addRow: function(){ this.rows.push({name:"",job:""}); }, removeRow: function(row){ //console.log(row); this.rows.$remove(row); } }});