하수도키의 성장일기

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#3 (v-model custom modifiers)

v-model 수식어(v-model modifiers) 지난 포스팅에서 2개의 v-model을 사용하는 법을 살펴봤다. 이번 포스팅에서는 vue3에서 v-model 커스텀 수식어(modifiers)를 사용하는 것을 살펴보겠다. v-model 수식어 살펴보기 vue2에서 사용했던 v-model 수식어들도 vue3에서 사용이 가능하다. .lazy : input 이벤트 대신 change 이벤트를 받는다. .number: 문자를 유효한 숫자로 변경한다. trim : 공백을 없애준다. v-model 커스텀 수식어 살펴보기 이전 포스팅에 만들었던 SalutationName 컴포넌트를 이어서 사용한다. capitalize라는 수식어를 만들어 보겠다. v-model:model 선언 후에 . 추가한 다음 수식어를 적어주..

개발일기/Vue.js

Vue.Js 3 Composition API에 대해 알아보자 - 4(Sharing State, Suspense)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Sharing State Suspense Sharing State API 호출 작업을 할때, 로딩 상태, 에러 상태, try/catch구문을 사용한다. Composition API에서 사용하는 법을 살펴보자. 아래는 이전 포스팅에 연장인 예제 코드이다. /src/App.js Search for Loading: {{ loading }} Error: {{ error }} Number of events: {{ results }} Sharing State Composition API 위에 살펴본 API 호출 로직(결과, ..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 3(Modularzing, LifeCycle Hooks, Watch)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Modularizing(모듈) Lifecycle Hooks(라이프사이클 훅) Watch Modularizing(모듈) Composition API 사용하는 이유는 기능별로 구분, 코드 재활용이다. 모듈을 통해 구현해보자. 현재 코드는 아래와 같다. ... 컴포지션 함수로 빼기(Extracting into a Composition Function) ... useEventSapce() 함수를 exrpot default {} 외부에 작성하고 분리했다. 그 함수를 setup() 내부에서 사용한다. 이제 컴포지션 함수를 파..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 2(Methods, Computed, The Reactive Syntax)

Vue3 Composition API에 대해 알아보자 - 2 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Methods Computed Properties The Reactive Syntax Methods 메서드는 Vue 인스턴스에서 사용된다.(함수라고 생각하면 된다.) 아래 코드에서 capacity를 1씩 증가시키는 메서드를 만들어보자. Capacity: {{ capacity }} vue2에서 메서드 사용은 아래 코드와 같다.(data()사용했을시) methods: { increase_capacity() { this.capacity++; } } vue3에서는 setup 메서드 안에서 만든 다음 return 내..

개발일기/Vue.js

Vue.Js 3 Composition API 살펴보기 - 1(setup, reactive,methods, computed)

Vue3 Composition API에 대해 알아보자 Vue3가 나오면서 Composition API가 제공되고 있다. Composition API가 왜 나왔는지 알아보고 뭔지 알아보자. 개요 Vue2 한계 Setup & Reactive References Methods Computed Properties The Reactive Syntax Vue2 한계 컴포넌트가 커지면 커질수록 가독성이 떨어짐 예를 들면, 검색어를 입력하고 해당 검색어로 찾은 정렬된 결과를 보여주는 컴포넌트를 살펴보자. // Vue2 export default { data() { return { 검색어 로직(Search) 결과 정렬(Sorting) } }, methods: { 검색어 로직(Search) 결과 정렬(Sorting) } ..