vue.js
[VUE] 공통 directives 정리 및 선언(가격 3자리 콤마 - 계속 추가 예정)
서론화면을 개발하다보면 input영역에 자주쓰는 포맷이 있다. 이부분을 매번 filter나 methods를 이용하여 하기보단 direc이부분을 공통 directives 만들어서 사용하고자 하여 공부하는겸 정리한다. directives 란디렉티브는 v-접두사가 있는 특수 속성이다. 그대로 직역하면 '지시'를 뜻한다. 기본적으로 vue에서 제공하는 directive가 있다. v-text v-html v-show v-if v-on v-bind v-model 등등 있지만 사용자가 직접 지정하여 만들수도 있다. 아래에는 숫자 입력시 3자리 마다 ',' 를 넣어주어 가격 부분에 보기 좋게 해주는 사용자 지정 directive를 만들어보겠다. CASE1. JS import comm-utils.jsexport defa..
[VUE] router - history에 따른 scroll 제어를 위한 scrollBehavior 사용법
서론 vue 개발을 하면서 스크롤 이슈가 자주 나온다. 그걸 해결하는 방법은 여러가지 있지만 이번엔 scrollBehavior 를 이용하여 제어하는 방법을 정리하고자 한다. 파일위치 상대경로 : src\router\index.js 소스 const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, // history back 일시 이전 스크롤 위치 이동 / 신규 페이지는 스크롤 top scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } }) 소스 설명 rou..
[vue.js] e-commerce(쇼핑몰) 기반으로 만들어보는 router 정리
서론 데이터 입력하는 화면에서 불러오기하여 가져온 데이터를 set 해달라는 요청이 있어서 개발을 시작하였습니다. 그런데 입력하는 화면에서 사용하는 obejct와 불러오기하여 가져온 object가 달라서 그대로 set할 수 없었습니다. 그래서 기준 object에 존재하는 속성 값만 set 하는 방법을 적어놓았습니다. 데이터 // 기준 데이터 const a = { test : 'test', test1: '', test2: '2' } //조회한 데이터 const b = { test1: '11', test2: '22' test3: '33' } //원하는 데이터 const a = { test: 'test', // b에 key가 없으므로 유지 test1: '11' // a가 빈값이고 b에 존재하므로 set test..