전체 글98 [Vue.js] 페이징 로직 Previous 1 ... {{ n }} ... {{ results.totalPages }} Next showPagingButton: function(n) { const vm = this var thisPage = vm.results.number + 1 var totalPage = vm.results.totalPages + 1 //[조건] 5페이지가 넘어가면 //[결과] 1 ~ 4페이지 숨겨주기 var cond1 = (thisPage 5) //[조건] 마지막페이지 ~ 마지막페이지-4 까지이면 //[결과] 마지막페이지-4를 제외한 나머지 페이지들 숨겨주기 var cond2 = (thisPage > (totalPage - 5)) && (n < (totalPage - 5)) //[조건].. 2018. 10. 22. [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. 이전 1 2 3 4 5 ··· 17 다음