uxtry

Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 사용하는 방법입니다.  Props는 컴포넌트 간의 데이터 전달을 가능하게 하며, 이를 통해 컴포넌트 간의 재사용성과 독립성을 높일 수 있습니다. 아래 예제를 통해  Props의 기본개념과 활용법을 자세히 설명하겠습니다. 간단한 Props 전달 ParentComponent.vue 부모 컴포넌트  ChildComponent.vue 자식 컴포넌트 {{title}}★ Vue SFC Playground 코드 실행 →ParentComponent에서 childComponent로 title이라는 데이터를 전달합니다.ChildComponent는 전달 받은 title 값을 표시합니다. Props의 주요기능과 활용법 1. 데이터 유형 검..

Single File Component(SFC)는 HTML, JavaScript, CSS를 한 파일에 정의하여 Vue컴포넌트를 작성하는 방식입니다. 아래는 SFC의 구조와 실제 예제를 통해 주요 개념을 설명합니다. 1.SFC의 기본구조 {{title}} Count: {{ count }}★ Vue SFC Playground 코드 실행 →2. 주요 구성 요소template태그는 컴포넌트의 UI를 정의합니다. 여기에는 Vue의 템플릿 문법을 사용하여 데이터 바인딩, 이벤트 처리 등을 선언적으로 작성할 수 있습니다. Script★ Vue SFC Playground 코드 실행 →데이터바인딩: v-model로 newTask와 요소를 양방향 바인딩.이벤트처리: @keyup.enter로 엔터 키 이벤트를 처리해 ..

vue에서 컴포넌트(component)는 재사용 가능한 UI요소를 정의하는 기본 단위 입니다. 컴포넌트를 사용하면 코드를 모듈화하고 유지보수를 쉽게 할 수 있습니다. 1. 컴포넌트 기본 구조template: 컴포넌트의 HTMl 구조를 정의합니다.script: 컴포넌트의 데이터, 로직, 상태등을 정의합니다.style: 컴포넌트의 스타일을 정의합니다.(선택 사항)2. 단일 파일 컴포넌트 예제 Vue 컴포넌트 기초 {{ title }} 이것은 자식 컴포넌트입니다. ★ Vue SFC Playground 코드 실행 → 3. 코드 설명1) App.vue(부모 컴포넌트):메인 컴포넌트에서 ChildComponent를 사용합니다.title="Hello Vue!"로 ChildConpo..

Vue의 watch와 watchEffect는 Composition API 에서 반응형 데이터의 변화를 감지하고 특정 작업을 수행하기 위해 사용됩니다.두 기능은 비슷해 보이지만, 사용 목적과 동작방식이 다릅니다. 1. watchwatch는 특정 데이터(반응형 상태)의 변화를 감지하고 그에 따라 작업을 실행합니다. 특징:특정 데이터를 명시적으로 감시합니다.초기 실행 없이, 데이터가 변경될 때만 실행됩니다.비동기 작업에 유용합니다.사용 예제 텍스트: {{ text }}작동 방식:사용자가 text를 변경할 때만 watch 콜백이 실행됩니다.newValue: 변경된값, oldValue: 변경되기 전의 값.복수 데이터 감시 비동기 작업 예제 watch의 옵션immediate: 감시 초기 시점에 즉시 콜백 실..

vue에서 양방향 바인딩은 v-model 디렉티브를 사용하여 데이터와 UI 요소간의 값을 동기화하는 방식입니다. 이는 양방향 데이터 바인딩을 구현하여 데이터가 변경되면 UI가 업데이트되고, UI가 변경되면 데이터가 업데이트되도록 합니다. 1.기본 사용법v-model은 일반적으로 , , 등의 폼 요소에서 사용되며, 데이터와 요소 값을 자동으로 동기화합니다.예제: 기본 입력 바인딩 입력한 메시지: {{ message }}★ Vue SFC Playground 코드 실행 →사용자가 입력필드에 값을 입력하면 message 데이터가 업데이트됩니다. 반대로 message 데이터가 변경되면 입력 필드의 값도 자동으로 업데이트됩니다. 2.다양한 폼 요소에서의 사용(1) 체크박스 체크박스 선택 ..

vue에서는 이벤트 처리를 위해 v-on 디렉티브를 사용합니다. 이 디렉티브는 HTML 요소에 이벤트 리스너를 연결하며, 축약형으로 @기호를 사용할 수 있습니다. Vue3에서는 Compositon API와 함께 이벤트를 더 동적으로 관리할 수 있는 기능도 제공됩니다. 1. 기본 이벤트 처리기본적인 이벤트 처리는 v-on을 사용하여 특정 이벤트를 컴포넌트 메서드에 연결합니다.예제: 클릭 이벤트 클릭하세요 축약형 클릭★ Vue SFC Playground 코드 실행 →위 코드에서 v-on:click 또는 @click은 버튼 클릭 이벤트를 handleClick메서드에 연결합니다. 2. 이벤트 전달vue에서는 기본적으로 이벤트 객체($event)가 이벤트 핸들러에 전달됩니다.예제: 이벤트 객체 사용★ Vu..

vue3d의 Composition API 내에서 디렉티브는 기본적으로 setup() 함수내에서 선언하고 관리할 수 있습니다. Composition API에서는 Reactive 상태, Computed 속성, Watchers와 같은 기능을 활용하여 디렉티브를 더 효율적으로 관리하고 구성할 수 있습니다.디렉티브를 Composition API와 함께 사용하면 보다 간결하고 재사용 가능한 코드를 작성할 수 있습니다. 기본적으로 디렉티브는 setup() 함수 외부에서 정의되며, app.drective() 또는 drectives옵션을 사용해 Vue애플리케이션에 등록할 수 있습니다. 1. Composition API에서의 디렉티브 사용vue3의 Composition API내에서는 디렉티브를 사용하는 방식이 Vue2와 ..

Vue 3에서 Class와 Style 바인딩은 요소의 class와 style 속성을 동적으로 업데이트할 수 있게 해 주는 기능입니다. 이를 통해 데이터에 기반하여 CSS 클래스를 추가하거나 스타일을 변경할 수 있습니다. Vue의 반응형 특성을 이용해 상태 변화에 따라 UI의 스타일을 동적으로 바꾸는 데 유용합니다. Class 바인딩1. 객체 문법(Object Syntax)객체 문법을 사용하면 클래스 이름을 키로, 해당 클래스가 적용될지 여부를 값으로 설정할 수 있습니다. Class Binding Example  이 예시에서 isActive가 true일 때는 active 클래스가 적용되고, isLarge가 true일 때는 text-large 클래스가 적용됩니다. 2. 배열 문법(Array Syn..

Vue에서 조건부 렌더링을 위해 두 가지 주요 디렉티브인 v-if와 v-show를 사용할 수 있습니다. 두 디렉티브 모두 조건에 따라 요소를 표시하거나 숨기는데 사용되지만, 작동 방식에는 차이가 있습니다. 1.v-ifv-if는 조건이 true일 때만 해당 요소를 DOM에 추가합니다. 조건이 false이면 해당 요소가 DOM에서 제거됩니다.장점: 필요하지 않은 경우 DOM에 요소를 아예 렌더링하지 않기 때문에 성능 면에서 유리할 수 있습니다.단점: 조건이 자주 변경되면, 요소를 DOM에 추가/제거하는 비용이 발생하여 성능에 영향을 줄 수 있습니다. 이 요소는 isVisible이 true일 때만 표시됩니다. 2.v-showv-show는 요소를 항상 DOM에 남겨두지만, 조건이 false일 경우 CSS의 d..

Vue에서는 목록을 렌더링할 때는 v-for 디렉티브를 사용합니다. v-for는 배열 또는 객체의 데이터를 반복하여 여러 요소를 렌더링 할 때 유용합니다. 주로 , , 등의 요소에 사용됩니다. 기본사용법v-for는 아이템과 인덱스를 반복하며 렌더링할 수 있습니다. 배열반복배열 데이터와 각 아이템을 렌더링할 때는 다음과 같이 사용합니다. {{ index }}: {{ item }} ★ Vue SFC Playground 코드 실행 →여기서(item, index)는 각각 배열의 값과 인덱스를 나타냅니다.:key="index"는 각 요소에 고유 키를 할당하여  Vue가 효율적으로 DOM을 업데이트할 수 있도록 합니다. 객체 반복객체의 속성을 반복할 때도 v-for를 사용할 수 있습..