vue Router정리
Vue Router 개념vue의 router는 기본적으로 javascript의 window.history (history API)를 기반으로 하고 있다path는 필수항목이다 name은 선택항목이다아래와 같이 설정후 <route-link>혹은 route.push로 이동시
Provide(제공) / Inject(주입)
( 사진으로 보면 한눈에 알수있다. 데이터를 특정 컴포넌트까지 바로 전달가능하다 )- 부모템플릿에서 자식의 자식의 자식까지 전달할 props를 불필요하게 설정할 필요가 없음 (진작 알았다면..)- 반응성을 가진 변수를 전달시 전달 받은 후에도 그대로 반응성을 가짐부모
Computed값수정/스타일동적바인딩/v-for구조분해할당/watch의여러변수감시
( 5번의 예제. 렌더링된 결과 확인)1. computed값 수정하기computed의 값을 수정하기 위해선 setter를 사용함<script setup> import { ref, computed } from 'vue' const firstName = ref('Joh
속성과 이벤트의 동적바인딩 및 디렉티브 사용예제
1.속성을 동적바인딩하는 방법객체명 = { id : 'id명'}<요소명 v-bind="객체명" >2.이벤트 동적바인딩@[eventName]=이벤트핸들러3.속성 동적바인딩const attrName='속성명'<요소명 :[attrName]="'동적으로 속성을 등록합니다'"
조건부 slot / 동적 slot / 대체 컨텐츠를 사용한 slot
조건부 slotv-if="$slots.슬롯명"을 사용해서 slot을 조건부로 표시할수있다 (예제의 1번 참고)동적 slot변수에 슬롯명을 할당한후 동적으로 slot을 표시할수있다( 예제의 3번 참고 )#[변수명] v-slot:[변수명]등으로 사용가능하다대체 컨텐츠
slot 사용시 부모템플릿에서 자식컴포넌트의 매개변수 관리하기
아래와 같은 상황에 사용가능하다- (부모템플릿 ← 자식컴포넌트1 ← 자식컴포넌트2）와 같은 경우에 사용가능하다- 부모템플릿에서 자식컴포넌트1에서 자식컴포넌트2로 매개변수를 전달하는걸 관리가능하다예제1- 기본예제* 부모템플릿 <자식컴포넌트> <template
변수의 반응형에 대해서(Reactive)
반응형에 대해서선언된 변수가 반응형을 가지는지 아닌지를 명확하게 몰라서 정리함반응형이란 해당 변수를 변경할때, 해당 변수를 참조하는 부분(화면/로직)에서 변경되는지를 말함1. 변수의 반응형 패턴 다섯가지<template> <div> /* 패턴1 */
ref, reactive, toRef, toRefs, 자바스크립트 프록시
RefImpl객체와 프록시객체자바스크립트의 프록시?JavaScript의 Proxy 객체는 객체에 대한 작업을 가로채고, 필요에 따라 이러한 작업을 조작하는 기능을 제공합니다.이는 Vue.js의 반응성 시스템의 핵심입니다.예를 들어, 객체에 새로운 속성을 추가하거나 기존
부모컴포넌트에서 자식컴포넌트로 데이터를 전달하는 예제
(실제 입력 화면)예제1.아래의 예제는 v-model을 사용한 양방향 예제를 사용하지 않았다2.자식요소에서 ref가 아닌 toRefs를 사용하였다3.데이터 흐름은 아래의 예제의 1~ 6이다ParentComponent.vue (부모 요소)<template> <div
폼 입력바인딩 (v-model)
폼 입력바인딩 (v-model)v-model값 바인딩: Vue에서는 v-model 디렉티브를 사용하여 폼 입력 요소(input, textarea, select 등)의 값과 데이터를 쉽게 양방향 바인딩할 수 있습니다.일반적인사용 예제 (value , input함수 사용)
v-model과 emit에 대해서
v-model을 사용가능한 컴포넌트<input><select><textarea>v-model의 수식어.lazy - input 대신 change 이벤트를 수신함..number - 유효한 입력 문자열을 숫자로 변환하여 전달..trim - 사용자 입력의 공백을 트리밍. (
watch와 watchEffect의 차이
watch활용 시기: 특정 데이터가 변경되었을 때 실행.데이터 비교: 새로운 데이터와 이전 데이터를 가져옴 (lazy).활용 상황:특정 반응 속성을 관찰하거나, 이전 값에 관심이 있는 경우 사용.함수 또는 하나 이상의 반응 속성을 감시할 수 있음.실행 조건: react