하수도키의 성장일기

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#5(Multi root components)

이번 포스팅에서는 Multi-Root Components(멀티 루트 컴포넌트)를 살펴 보겠다. Vue2에서는 멀티 루트 컴포넌트랑 fragments를 사용할 수 없었고 사용하려면 라이브러리 같은 것을 불러와야 가능했다. Vue3에서는 라이브러리 사용 없이 멀티 루트 컴포넌트랑 fragments를 사용할 수 있다. 싱글 루트랑 멀티 루트 컴포넌트의 차이점과, 싱글 루트에서 멀티 루트로 변경하는 작업을 살펴보자. 멀티 루트 컴포넌트(Multi-Root Components in Vue) 지난 포스팅에서 사용했떤 BaseInput 컴포넌트를 이어서 사용한다.(여기 코드 참고 https://codesandbox.io/s/purple-sky-umvws?file=/src/components/BaseInput.vue)..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#4 ($attrs, $listeners)

2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) 2021/01/28 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기) 2021/01/31 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#3 (v-model custom modifiers) 이번 포스팅에서는 $attrs 가 vue3에서 어떻게 변했는지 살펴보자. vue2에서는 HTML attributes들만 포함했지만 vue3에서는 HTML attributes뿐 아니라 listeners, classes, styles까지 다 포함한다. 이러한 개념을 배우면서 부모에서 자식 컴포넌트로 e..

개발일기/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] 새로운 v-model 살펴보기#2 (다수의 v-model 사용하기)

2021/01/22 - [개발일기/Vue.js] - [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) [Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점) Vue3가 나오면서 변한 것들이 있는데 그중에서 v-model을 한번 살펴보자. 이번 포스팅에서는 간단하가 vue2에서 v-model과 vue3에서 v-model 에 차이점과 기본 형식에 대해 살펴보겠다. 다음 포스티은 v-mod hasudoki.tistory.com 다수의 v-model 연결하기(Multi v-model bindings) 지난 포스팅에서 vue3에서 v-model 사용하는 일반적인 방법을 살펴봤고, 기본 input과 event listeners를 바인딩하는 방법을 살펴봤다. 이번 포스팅에..

개발일기/Vue.js

[Vue.js] 새로운 v-model 살펴보기#1 (vue3에서 바뀐 점)

Vue3가 나오면서 변한 것들이 있는데 그중에서 v-model을 한번 살펴보자. 이번 포스팅에서는 간단하가 vue2에서 v-model과 vue3에서 v-model에 차이점과 기본 형식에 대해 살펴보겠다. 다음 포스티은 v-model를 여러개 쓸 때랑 modifiers에 대해 글을 써보겠다. 새로운 v-model(The new v-model) v-model을 애플리케이션의 상태에 input 입력값을 쉽고 빠르게 얻을 수 있고, 활용이 가능하다. v-model을 사용하여 부모는 입력되는 값을 받을 수 있다. vue3에서 다수의 바인딩을 할 때 더 강력하고 유연하게 설계가 되었다. Navite inputs으로 알아보자(Kicking it off with Native inputs) vue2에서 v-model을 ..