Vue - Component에서 v-model 사용하는 방법

Vue에서는 v-model을 이용해서 양방향 바인딩을 할 수 있는 장점이 있습니다.v-model 기본 사용법기본적으로 아래와 같이 v-model을 이용해서 양방향 바인딩을 할 수 있습니다.  Vue 양방향 바인딩 v-modelVue에서는 양방향 바인딩을 v-model를 이용하여 간단하고 쉽게 할 수 있는 방법이 있습니다. 양방향 바인딩이란? 입력요소의 이벤트를 수신하는 동시에 값을 보내는 방식입니다. 동시에 데이터 통powerku.tistory.com컴포넌트에서 v-model 사용하기v-model 은 기본적으로 modelValue를 prop으로 사용하고 update:modelValue를 이벤트로 사용합니다.아래와 같이 사용하면 양방향 바인딩이 가능합니다. name = value"/> BaseInput.v..

• format_list_bulleted Develop/Vue
• · 2024. 6. 15.
• textsms

Vue Computed vs Watch 차이점 정리

Vue에는 Computed, Watch, Mehtods 속성을 언제 사용하면 좋을지 정리입니다. 헷갈릴 수도 있지만, 언제 사용하면 좋을지 알아두시면 유용합니다. 1. Computed 오직 데이터 바인딩에서만 사용 데이터가 변경될때 실행 다른 데이터 값에 의존하는 데이터에 사용 Vue Computed란? 사용 해야 하는 이유 Vue에서 동적 값을 출력하는 핵심 기능인 computed 가 있습니다. computed를 이용하면 좀 더 간편하게 데이터를 출력시킬 수 있고, 성능을 향상할 수 있습니다. Computed는 언제 사용해야 하는가? {{ price + powerku.tistory.com 2. Watch 템플릿에 직접 사용 X 데이터 변경이 일어나고 부수적인 Side Effect 발생이 필요할때 사용(..

• format_list_bulleted Develop/Vue
• · 2023. 5. 12.
• textsms

Vue Computed란? 사용 해야 하는 이유

Vue에서 동적 값을 출력하는 핵심 기능인 computed 가 있습니다. computed를 이용하면 좀 더 간편하게 데이터를 출력시킬 수 있고, 성능을 향상할 수 있습니다. Computed는 언제 사용해야 하는가? {{ price + '원' }} 위와 같이 price 값 뒤에 원이라는 단위를 붙여야 된다면 template에서 넣어 줄 수 있습니다. 하지만 이렇게 하게 된다면, 문제점이 있습니다. 복잡한 연산의 경우 알아보기 어렵습니다. 매번 컴포넌트가 렌더링 될 때마다 실행됩니다. computed 기능을 사용하여 연산하게 되면 해당 연산이 따로 분리되기 때문에 유지보수에 좋고, 알아보기 쉽습니다. price라는 값의 의존성을 가지게 되며 price 값이 변경될 때만 연산을 진행합니다. price 값이 변..

• format_list_bulleted Develop/Vue
• · 2023. 5. 8.
• textsms