VUE

Vue3 공식 사이트 https://ko.vuejs.org/guide/essentials/reactivity-fundamentals.html 백엔드 개발과 함께 학습하기 쉬운? Vue를 학습해보자 vue Cli설치 : vue 명령어를 사용할 수 있도록 함 npm i

beforeCreate: 초기화 전create : 초기화beforeMount: html이랑 연결 이전 (DOM)mount : html이랑 연결 (DOM)update랑 unmount로 위 사진보면서 이해하면 된다.데이터 바인딩의 가장 기본적인 형태는 "Mustache"(

Computed 반응형 데이터를 포함하는 복잡한 논리의 경우, 계산된 속성을 사용하는 것이 좋습니다. 캐싱기능이 있습니다. 한번 계산해놓았기 때문에 함수처점 반복적으로 호출하는것이 아닌 저장된값, 캐싱된값을 사용한다. 다만 읽기전용 이기때문에 getter, set

v-bind가 class 및 style과 함께 사용될 때 특별한 향상을 제공<div :class="{ active: isActive }"></div>객체를 반환하는 계산된 속성에 바인딩할 수도 있습니다.:class를 배열로 바인딩하여 클래스 목록을 적용할 수

배열을 리스트로 렌더링할 수 있습니다현재 아이템의 인덱스를 가리키는 별칭도 지원합니다.객체에 v-for 사용하기v-for를 객체의 속성을 반복하는 데 사용할 수 있습니다.배열 변경 감지수정 메서드Vue는 반응형 배열의 변경 메소드가 호출 되는것을 감지하여, 필요한 업데

v-on 디렉티브는 단축 문법으로 @ 기호를 사용DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행인라인 핸들링 : 권장하지 않음<button @click="count++">1 추가</button>메서드 핸들링: 권장함다만

v-bind : 사용자가 데이터를입력해도 기존 데이터에 영향을 줄 수 없다.사용자가 데이터를입력해도 기존 데이터에 영향을 줄 수 있다.Ex) msg데이터에 영향을 줄 수 있음좀 더 간편한 v-model 이라는것이 있다.주의사항한글입력시 한박자 늦는다. 한글입력시에는 @

컴포넌트

fallback content 기존의 컨텐츠 대신사용하는 데이터슬롯이 있어야 데이터(banana) 입력 받을수 있음이름을 갖는 슬롯 = 순서보장일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 할 때 props를 사용그러나 부모-> 자식-> 자식-> 자식컴

컴포지션를 사용해 같은 기능들끼리 분류해 코드를 정리할 수 있다.setup()을 사용해 코드를 작성한다.다만, setup안에 작성된 데이터는 반응성을 가지지 않기 때문에 ref를 사용해 객체 데이터를 사용해야 하고값을 사용하기 위해선 .value를 사용해야 한다.그 다