vue3

Vue는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크임.표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 단순한 것 부터 복잡한 것 까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공함.선언적

전제 조건명령줄에 대한 친숙함Node.js 버전 16.0 이상 설치생성된 프로젝트는 Vite를 기반으로 빌드 설정을 사용하며 vue 싱글 파일 컴포넌트(SFC)를 사용할 수 있도록함.최신 버전의 Node.js가 설치되어 있는지 확인한 후 명렬줄에 다음 명령을 실행함.위

모든 Vue 앱은 createApp 함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작함.createApp 에 전달하는 객체는 사실 컴포넌트임.모든 앱에서 다른 컴포넌트 자식으로 포함할 수 있는 "최상위 컴포넌트"가 필요함.싱글 파일 컴포넌트를 사용하는 경우 일

vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용함.모든 Vue 템플릿은 사양을 준수하는 브라우저 및 HTML 파서에서 문법을 분석할 수 있는 문법적으로 유요한 HTML 임.내부적으로 Vue는 템플릿을

반응형 상태 설정 reactive() 함수를 사용해 객체 또는 배영을 반응형으로 만들 수 있음. 반응형 객체는 Javascript Proxy 이며 일반 객체처럼 작동함. 일반 객체와 차이점은 Vue가 속성에 접근 및 반응형 객체의 변경사항을 감지할 수 있다는 것.

템플릿 내 표현식은 매우 편리하지만 간단한 작업을 위한 것임.템플릿에 너무 많은 논리를 넣으면 비대해져 유지 관리가 어려워질 수 있음.예를 들어 객체 내 벼열이 있는 경우.그리고 author 가 이미 책을 가지고 있는지에 따라 다른 메시지를 표시하고 싶으면이 시점에서

일반적으로 엘리먼트에 데이터를 바인딩하는 이유는 클래스 목록과 해당 인라인 스타일을 조작하기 위함임.class, style 둘다 속성이므로 다른 속성과 마찬가지로 v-bind를 사용하여 문자열 값을 동적으로 할당 할 수 있음.그러나 연결된 문자열을 사용하여 이러한 값을

v-if 디렉티브는 조건부로 블록을 렌더링하는 데 사용됨.블록은 디렉티브 표현식이 true값을 반환하는 경우에만 렌더링됨.v-else 디렉티브를 사용하여 v-if에 대한 "else 블록"을 나타낼 수 있음.v-else-if도 이름에서 알 수 있듯이 v-if에 대한 "e

v-for 디렉티브를 사용하여 배열을 리스트로 렌더링할 수 있음.v-for 디렉티브는 item in items 형식의 특별한 문법이 필요함.여기서 items는 배열이고, item은 배열 내 반복되는 엘리먼트의 별칭(alias) 임.v-for 범위 내 템플릿 표현식은 모

@ 단축 문법 기호를 이용하여 v-on 디렉티브를 사용할 수 있음.DOM 이벤트를 수신하고 트리거될 때 JavaScript를 실행함.사용법은 v-on:click="handler" 를 사용하거나 단축으로 @click="handler" 를 사용함.핸들러의 값은 다음 중 하

프론트엔드에서 폼을 처리할 때, 폼 입력 엘리먼트의 상태를 JavaScript의 상태와 동기화해야 하는 경우가 많음. 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것은 번거로운 작업임.v-model 디렉티브는 위의 내용을 다음과 같이 단순화하는 데 도움이 됨

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거침.예를들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 함.그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는

계산된 속성은 계산되어 파생된 값을 선언적으로 사용할 수 있게 함. 그러나 상태 변경에 대한 반응으로 '사이드 이펙트'(DOM을 변경하거나 비동기 작업의 결과를 기반으로 다른 상태를 변경하는 것)을 수행해야 하는 경우가 있음. Composition API를 사용하는

Vue의 선언적 렌더링 모델은 개발자가 직접 DOM에 접근해야 하는 대부분을 추상화하지만, 개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우가 있을 수 있음. 이러한 필요성을 충족시키기 위해 ref라는 특별한 속성을 사용할 수 있음.ref는 v-for 젱에서 언급한

컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있음.따라서 앱이 중첩된 컴포넌트의 트리로 구성되는 것은 일반적임.이것은 기본 HTML 엘리먼트를 중첩하는 방법과 매우 유사함.Vue는 각 컴포넌트에 사용자 정의 컨테