본문 바로가기

프로그래밍/VueJS

Cannot find module 'webpack-cli/bin/config-yargs' 오류메시지 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 로 웹서비스 호출하기 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 관련 샘플 사이트 VueJS 관련 샘플 사이트http://www.vuescript.com/ http://vuejsexamples.com/ https://vuejsfeed.com/
vue.js 의 이전과 다음 화면 바인딩 하기 (template 사용) 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 무료 오픈 소스 실시간 메시징 서비스 Emitter는 모든 장치를 연결 하는 무료 오픈 소스 실시간 메시징 서비스 입니다. publish-subscribe 메시징 API는 속도와 보안을 위해 제작되었답니다. (IoT, 게임, 앱 및 실시간 웹용 인프라)emitter.io는 MQTT 프로토콜을 기반으로 하고, 메시지 저장을 특징으로하는 분산 형, 확장 성 및 내결함성 publish-subscribe 메시징 플랫폼입니다. 낮은 대기 시간, 바이너리 메시징 및 높은 처리량에 대한 요구 사항을 충족시킴으로써 온라인 게임 및 모바일 응용 프로그램에 사용할 수 있습니다. 또한 대시 보드 또는 시각적 분석 또는 채팅 시스템과 같은 실시간 웹 응용 프로그램에도 사용할 수 있습니다. 또한 사물의 인터넷에 적합하며 센서를 제어하고 데이터를 수집 및 분석 할 ..
Vue.js 로 행추가(중급기술) 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 로 행추가 및 삭제하기 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); } }});
Vue.js v2 CRUD application https://codepen.io/mevdschee/pen/BpbEbj 1. html Vue.js CRUD application Vue.js 2 CRUD application Ported from: Vue.js CRUD application Add product Product name Name Description Price Actions {{ product.name }} {{ product.description }} {{ product.price }} Edit Delete Add new product Name Description Price, Create Cancel {{ product.name }} Description: {{ product.description }} Price: {{ product...