SeouliteLab

Vue 3에서는 Composition API가 소개되면서 onMounted라는 훅이 등장했습니다. 이 훅은 Vue 컴포넌트가 마운트된 후에 실행되는 함수를 정의할 때 사용됩니다. 이를 통해 컴포넌트 초기화 및 데이터 로딩 등의 작업을 처리할 수 있습니다.아래는 onMounted 훅을 사용한 Vue 컴포넌트의 예제들입니다. 데이터를 불러오는 중... {{ item.name }} {{ initialized ? '초기화 완료!' : '초기화 중...' }} 이미지를 로딩 중입니다... 예제 1: 데이터 로딩onMounted 훅을 사용하여 컴포넌트가 마운트된 후 데이터를 로딩하는 예제입니다. fetchData 함수를 통해 비동기적으로 데이..

Vue.js는 단방향 데이터 흐름을 가지고 있지만, 양방향 데이터 바인딩을 통해 쉽게 데이터를 업데이트하고 반영할 수 있습니다. 엘리먼트를 사용하여 입력값을 처리하고, v-model 디렉티브를 이용하여 Vue 컴포넌트의 데이터와 연결할 수 있습니다.아래는 v-model을 사용한 Vue 컴포넌트의 예제들입니다. 입력값: {{ msg }} 카운트: {{ count }} {{ checked ? '선택됨' : '선택 안 됨' }} 예제 1: 간단한 입력 엘리먼트에 v-model.trim을 사용하여 입력값의 앞뒤 공백을 자동으로 제거합니다. 입력값이 변경될 때마다 msg 데이터가 업데이트되며, 해당 값이 화면에 실시간으로 반영됩니다.예제 2: 숫자..

메시지: {{ msg }} v-model.lazy 디렉티브를 사용하면 입력 요소의 값이 변경될 때 즉시 데이터를 업데이트하지 않고 "change" 이벤트 후에 동기화됩니다.: 사용자가 입력한 값이 msg 변수와 동기화됩니다. 그러나 변경 사항이 즉시 반영되지 않고 "change" 이벤트가 발생한 후에 업데이트됩니다.메시지: {{ msg }}: 입력 요소의 값과 동기화된 msg 변수의 값을 표시합니다.이렇게 하면 사용자가 연속적으로 입력을 하더라도 매번 데이터가 업데이트되는 것이 아니라, 사용자가 입력을 마치고 입력 요소를 벗어났을 때 한 번에 데이터가 업데이트됩니다.