전체 글100 [Vue.js] promise 사용하기 promise를 사용하여 api콜하는 부분을 디자인해주었음mixin의 promise부분을 살리고 vm.promise(function)와 같이 사용하면 될듯then 안에서 promise가 리턴되어야 그 결과값을 바탕으로 다음 then으로 넘어감 mixin.js export default { methods: { promise: function(func){ //프로미스 만들기 return new Promise(function(resolve, reject){ resolve(func()) }) }, call: function(action) { var vm = this var successResult vm.promise(function(){ if (action.confirmMsg !== undefined) retu.. 2018. 9. 20. [Vue.js] class를 만들어 vue객체 사용하기 여기서 class는 html의 class가 아닌 객체지향 프로그래밍의 class임을 말합니다. 아래 코드는 REST API 방식으로 구현하기 위해 만든 디자인 (참고용) main.js import Vue from 'vue' import Apifrom './services/ApiCall' Vue.prototype.$api = new Api(new Vue()) ApiCall.js import axios from 'axios' import apiUrl from './api.call.js' class ApiCall { constructor (vue) { this.apiInfo = apiUrl.data() this.vueInstance = vue } userData (callBack) { this.callApi(.. 2018. 9. 20. [Vue.js] mixin 전역 등록하기 지금까지 mixin을 사용하기 위해 각 컴포넌트 마다 export default { ... mixin: mixin ... }을 해주었는데귀찮으니 전역으로 선언을 해주기로 하자 main.js import Vue from 'vue' import myMixin from './mixins/mixins' Vue.mixin(myMixin) 2018. 9. 20. [vue] img src data binding 부모 컴포넌트의 부분this.items = [ { "title": data.item_type[100], "img": require("@/assets/img/i-move.png") }, { "title": data.item_type[200], "img": require("@/assets/img/i-rainbow.png") }, { "title": data.item_type[300], "img": require("@/assets/img/i-random.png") } ] 자식 컴포넌트의 부분 2018. 9. 7. url(path)을 비교하여 메뉴 active 하기 var url = window.location;// for sidebar menu entirely but not cover treeview$('ul.sidebar-menu a').filter(function() { return this.href == url;}).parent().addClass('active');// for treeview$('ul.treeview-menu a').filter(function() { return this.href == url;}).parentsUntil(".sidebar-menu > .treeview-menu").addClass('active'); window.location을 이용하여 url을 가져오고,메뉴의 링크와 비교하여 같다면 active class를 추가한다. 2018. 8. 13. vue.js radio button 토글 이벤트 걸기 webpack 사용중! 라디오버튼을 이용해서 datepick이라는 클래스의 div를 show/hide 할 예정 템플릿 : 즉시 예약 스크립트 : 코드를 간단하게 설명하자면v-model을 이용하여 toggleSendType을 연결시켜준다.요 변수 안에 들어가는 내용은 radio버튼의 value값으로이 값이 일치하면 체크되고, 불일치하면 체크가 풀리게 되는 거 같음-> toggleSendType의 디폴트값이 now. 따라서 now의 value를 가진 라디오버튼이 체크될것임. 그리고 만약 reserve value를 가진 라디오버튼이 체크되면 toggleSendType의 값이 reserve가 되겠다. 그리고, watch를 이용하여 감시자를 만든다. toggleSendType변수의 값이 바뀌는지 안바뀌는지 감시하.. 2018. 7. 12. docker httpd(아파치) 셋팅 docker run -dit --name my-apache-app -p 8080:80 -v "$PWD/apache_home":/usr/local/apache2/htdocs/ httpd:2.4 my-apache-app은 도커 프로세서의 이름이고,$PWD/apahce_home은 현재 경로에 있는 apahce_home을 htdocs처럼 사용한다고 속이는 역할을 한다.-p 8080:80도 원래 http같으 웹서버는 80포트로 열리는데, 8080포트를 80번 포트처럼 사용하겠다는 느낌 참고로 docker start my-apache-app은 my-apache-app이라는 이름을 가진 프로세스를 시작하겠다. docker stop my-apache-app은 my-apache-app이라는 이름을 가진 프로세스를 중지하.. 2018. 7. 10. 윈도우 cmder alias(매크로) https://www.lesstif.com/pages/viewpage.action?pageId=51282114위 주소 참고 그냥 cmder 터미널?에 alias test=cd /Users/haeru/Desktop/test 위와 같이 한줄 친 후엔 매크로 적용되어 test만 입력해도 cd /Users/haeru/Desktop/test 폴더로 이동된다. 2018. 7. 10. vue.js axios로 데이터 가져와서 이벤트 걸기 vue.js의 라이프사이클 이해한 후 보기 요약하자면1. axios로 api를 호출하여 데이터를 가져온 후2. 해당 데이터를 eventbus를 이용하여 다른 컴포넌트로 값을 넘겨준다.3. 2번의 그 다른 컴포넌트에서는 eventbus를 created()에서 받아 데이터를 연결해준 후, 원래 걸려있던 이벤트 해제4. updated()에서 다시 이벤트를 건다. --------------------------------webpack, axios, eventbus, datatable를 이용해서회원을 검색하면 회원검색api를 호출하여 회원정보데이터를 가져온 후그 결과값을 다른 컴포넌트에 값을 넘기고, datatable을 이용하여 테이블리스트를 만들어줘야하는 상황 검색하는 부분(usersearch.vue) ... .. 2018. 7. 10. 이전 1 2 3 4 5 ··· 12 다음