목록분류 전체보기 (189)
진스
메소드설명 push URL 이동. 히스토리 스택에 추가되므로 뒤로가기 버튼 동작시 이전 URL 로 이동 replace URL 이동. 현재 URL 을 대체하기 때문에 히스토리 스택 쌓지 않음 go 숫자만큼 뒤로가기 또는 앞으로 가기 (음수:backward, 양수: forward) 👉🏻 Vue.js 2.2.0 이후로 push, replace 에서 onComplete, onAbort 콜백 함수를 제공합니다. onComplete : 탐색 성공 onAbort: 중단(현재 탐색이 완료되기 전 동일한 경로로 이동하거나 다른 경로 이동) 1.router.push(location, onComplete?, onAbort?) Vue 인스턴스 내부의$router를 사용하여this.$router.push와 같이 사용할 수도 있..
vue 를 이용해 핸드폰에서도 이용가능한 반응형 웹을 만들 때, 이미지 슬라이더를 구현해야 할 때가 있으실 겁니다. 스와이프를 통해 여러 이미지를 리스트 형식으로 보여주는 기능을 구현하기 위해 vue-tiny-slider 모듈을 사용해보았습니다. 아래는 데모입니다. 위의 데모는 3개의 이미지를 슬라이더로 만들어 보여주는 예제입니다. 그럼 자세한 사용방법에 대해 알아볼까요? 사용하기 전 준비 vue-tiny-slider 를 사용하기 전 모듈을 먼저 설치해야 합니다. 저는 npm 을 주로 사용하기 때문에 npm 을 이용해서 모듈을 설치하도록 하겠습니다. 1 2 3 $npm i vue-tiny-slider --save // --save 는 package.json 에 자동으로 추가되도록 하기 위한 옵션입니다. ..
github.com/vuejs/awesome-vue vuejs/awesome-vue 🎉 A curated list of awesome things related to Vue.js - vuejs/awesome-vue github.com
참고 사이트 고양이도 할 수 있는 Vue.js isActive 변경하기 동적 클래스 동적 스타일 ※ 알기 쉽게 .is-active 는 배경색을 변경하게 했습니다. rintiantta.github.io 트랜지션과 애니메이션 클릭으로 카운터의 수 늘리기 클래스와 스타일 데이터 바인딩 See the Pen WNRWZeX by 배정민 (@baejm) on CodePen. SVG 데이터 바인딩하기 See the Pen BapEdYz by 배정민 (@baejm) on CodePen. 요소를 반복해서 렌더링하기 See the Pen BapEwYY by 배정민 (@baejm) on CodePen. 리스트에 요소 추가하기 See the Pen bGgJoqa by 배정민 (@baejm) on CodePen. 리스트에서 요..
참고 :codesandbox.io/s/gandanhan-gesipan-gq5mn 간단한 게시판 - CodeSandbox 간단한 게시판 by baejm using @vue/cli-plugin-babel, axios, vue codesandbox.io 상위 컴포넌트 SimplePagination.vue 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 TABLE PAGINATION 몇 개씩 표시: 로딩중 import axios from "axios"; import PaginatedList from "./Pagina..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 const input = document.querySelector('input'); const mask = '######-#######' let unmaskedText = ''; function doMask(char, i) { if (!i) unmaskedText = ''; if (!mask[i]) return ''; switch(mask[i]) { case '#': if (/\d/.test(char)) { unmaskedText += char; return c..
SI(System Integration) SI는 기업이 필요로 하는 정보시스템을 기획하는 단계부터 프로그래밍을 통한 개발과 구축, 그리고 사후 운영까지 전반적인 서비스를 제공하는 업무를 하게 됩니다. 기업에서 사용할 프로그램을 구축하는 작업을 아무것도 없는 상태에서 구축하는것입니다. 고객의 요구 사항을 분석하고 분석된 요구사항에 맞게 시스템을 구축하는 작업을 말합니다. 요구 사항 분석 ㅣ 고객의 요구 사항을 수집하는 작업 분석 / 설계: 요구 사항을 분석하여, 실제 개발이 가능한 형태로 설계하는 작업 개발 : 분석/설계를 통해서 나온 자료를 기반으로 실제 프로그램을 구축하는 작업 테스트 : 구축된 프로그램을 테스트 안정화 하는 작업 검수 : 최종 구축된 프로그램을 고객으로부터 이상없이 구축되었음을 인..
vue-carousel2 vs vue-slick vs vue-swiper 뭘 사용하지? www.npmtrends.com/vue-carousel-vs-vue-slick-vs-vue-swiper vue carousel vs vue slick vs vue swiper | npm trends Compare npm package download statistics over time: vue carousel vs vue slick vs vue swiper www.npmtrends.com 그렇다면 vue-carousel 사용법은? vue-owl-carousel vue-owl-carousel VueJS wrapper for Owl Carousel www.npmjs.com :autoplay : 일정 시간마다 자동 스크롤..