Vue (5) 썸네일형 리스트형 [Vue3] ref와 reactive 차이점 - ref타입제한 : String, Number, Object 등 어떠한 타입에서도 사용이 가능접근방식 : 변수.value property를 붙여 접근 - reactive타입제한 : Object, Array, Map, Set과 같은 타입에서만 사용이 가능접근방식 : 변수.property에 변경할 값을 넣어 접근 [vue3] v-model 내장 수정자 .trim사용자 입력의 공백이 자동으로 트리밍 .number- 사용자 입력이 자동으로 숫자로 유형 변환 .lazy- 기본적으로 v-model 은 각 input 이벤트 이후 데이터와 입력을 동기화한다. 대신 change 이벤트 이후에 동기화하기 위해 사용 [Vue3] defineModel 소개Vue에서는 데이터 흐름 관리를 위해 props와 emit를 이용한 방식이 널리 사용되어 왔습니다. 그러나 최근에 나온 Vue3.4에서는 defineModel 방식을 권장하고 있습니다. - props부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용 - emit부모 컴포넌트로 데이터를 전달 defineModel 이전의 방식 (foo = $event)"/> 이러한 방식은 간단하고 직관적이지만, 데이터 흐름이 복잡해지거나 중첩된 컴포넌트 구조에서는 유지보수가 어려울 수 있습니다. - defineModel 설명Vue 3.4부터는 권장하는 방식반환되는 값은 ref이며, 다른 ref처럼 접근하고 변경할 수 있지만, 부모 값과 로컬 값 사이의 양방향 바인딩응로 작동 (즉, 작성에 의해 변경되면 부모.. Vue 관련 패키지 추천 1. VeturVue 파일 확장자는 .vue로 되어 있다.Vetur는 .vue 파일의 코드 하이라이팅을 지원해준다. 2. Vue 3 Snippets.vue 파일 생성시 처음 입력해야 하는 코드를 snippets으로 지정 가능. 3. Vue PeekVue 프로젝트 내에서 참조되는 템플릿이나 모듈을 빠르게 추적이 가능하게 하는 플러그인 Vue + TypeScript 설치 1. Node 설치brew node install > node -v 명령어로 설치 확인node -v 2. Vue 설치- vue 2.xnpm install vue-cli -global - vue 3.xnpm install -g @vue/cli 설치 시 오류 관련npm ERR! code EACCESnpm ERR! syscall mkdirnpm ERR! path /usr/local/lib/node_modules/@vuenpm ERR! errno -13npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@vue'npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/l.. 이전 1 다음