uxtry

Vue3의 반응형(Reactivity) 시스템은 컴포넌트 상태가 변경될 때마다 UI를 자동으로 업데이트하여, 동적인 사용자 인터페이스를 쉽게 구현할 수 있도록 돕습니다. 반응형 시스템의 기초는 ref, reactive, computed, 그리고 watch와같은 API를 사용하는 것입니다. 1.refref는 원시 데이터 타입(문자열, 숫자, 블리언 등)을 반응형으로 만드는데 사용합니다. ref를 사용하면 값이 바뀔 때 Vue가 자동으로 UI를 업데이트 합니다. ref로 정의된 변수의 값을 읽거나 쓸 때는 .value를 통해 접근합니다. 카운트: {{ count }} 증가 ★ Vue SFC Playground 코드 실행 →이 코드에서 count는 반응형 변수로 설정되었고 count..

vue3에서 템플릿 문법은 HTML을 확장한 형태로, 데이터 바인딩 및 디렉티브를 통해 데이터를 UI에 쉽게 연결할 수 있습니다. Vue 템플릿 문법은 기본적으로 HTML과 비슷하지만, Vue가 제공하는 다양한 기능을 활용하여 동적인 사용자 인터페이스를 만들 수 있게 도와줍니다. 1. 데이터 바인딩{{ }} (Mustache 구문): 데이터 또는 계산된 값을 HTML에 렌더링 하는데 사용합니다.  안녕하세요, {{ userNmae }}!v-bind 디렉티브: 속성에 데이터를 바인딩할 때 사용합니다.  2. 디렉티브(Drectives)Vue의 디렉티브는 HTML속성을 확장하여 템플릿을 더 동적으로 만들어 줍니다.v-if: 조건에 따라 요소를 렌더링합니다. 로그인 되었습니다. 로그인..

vue3의 setup 함수는 Composition API의 핵심으로, 컴포넌트의 초기화와 관련된 로직을 정의하는 곳입니다.컴포넌트가 생성될 때 가장 먼저 호출되며, 여기에서 상태 변수나 메서드 등을 설정할 수 있습니다. setup에서 정의된 데이터는 컴포넌트의 반응형 상태로 관리되고, 템플릿에서 쉽게 사용할 수 있습니다.  setup 함수의 주요 특징초기화 위치: setup 함수는 컴포넌트가 생성되기 전에 호출되어 data, computed, methods 등의 Option API 속성 대신 사용됩니다.반응형 데이터: ref와 reactive를 사용하여 반응형 데이터를 설정하고 관리할 수 있습니다.반환값: setup 함수는 컴포넌트에서 사용할 데이터와 메서드를 반환합니다. 반환된 값들은 다른 로직에서 접..