vue.js/vue.js 기능
vue.js - vue-roller 사용 및 정리
지난 글 vue.js - 숫자 애니메이션(number animation) animated-number-vue 에서 숫자 애니메이션을 개발했었는데 animated-number-vue 는 애니메이션 효과가 적어서 다른 라이브러리를 찾는 중 vue-roller를 찾게 되어 글을 작성하게 되었다. 두 라이브러리 간단 차이점 및 vue-roller 라이브러리 설명과 테스트를 진행해보겠다. 차이점 animated-number-vue 특징 : 숫자 카운팅. 숫자가 0부터 시작하여 입력한 숫자까지 해당 영역에 카운팅되어 노출 vue-roller 특징 : 숫자 롤링. 입력은 텍스트로 byte 별 텍스트가 롤링된다. ex) 92 입력시 9 영역은 0~9까지 돌고 9 선택. 2 영역은 0~2까지 돌고 2 선택 v-rolle..
[vue.js] object(객체) 에 없는 데이터 변경 감지 vm.$set
서론 지난번 글 hjh0827.tistory.com/41 에서 배열(array)로 데이터 바인딩을 작성하였다. 해당 내용은 개인적 개발로 작성한것이므로 이번에는 obejct로 간단하게 데이터 바인딩에 대해 작성해보도록 하겠다. 상황 부모 컴포넌트 + 자식 컴포넌트 부모 컴포넌트에서 data로 선언된 obejct를 자식 컴포넌트로 prop 부모 컴포넌트에서 obejct 데이터 바인딩 시 자식 컴포넌트 변경 확인 vue.js에서 가장 중요한 데이터 바인딩 처리를 하기 위해 위의 상황을 생성하였다. 해당 구조는 vue.js에서 흔하게 볼수 있는 구조이다. 보통 부모 컴포넌트에서 선언한 데이터가 변경시 해당 데이터를 상속받는 자식 컴포넌트는 해당 데이터를 바인딩 해야한다. case 1. vm.items,.ind..
vue.js - v-model 배열(array)로 데이터 바인딩 하기
서론 이번 프로젝트 하면서 가장 짜증났던 요건이 있다. 1. select box 데이터를 다중 선택해야 하는 상황일때 multi select box가 아닌 select box를 다중으로 노출. ex) 3가지의 select 데이터 중 2개를 선택해야 한다면 2개의 select box를 생성하고 각각 1개씩 선택 2. 첫번째 select box에서 데이터를 선택했다면 두번째 select box는 선택 불가. 라는 vue.js 하면서 만났던 방식 중 가장 짜증나는 방식이었다. 개발 1. select box 데이터를 다중 선택해야 하는 상황일때 multi select box가 아닌 select box를 다중으로 노출. > 다중 선택해야 하는 개수만큼 select box를 v-for 처리. option 영역은 s..