Vue.js

• 빌드 과정 없이 정적 HTML에 적용
• 모든 페이지에 웹 컴포넌트로 추가
• SPA
• SSR
• SSG

Vue.js 3.0이 바뀐 점

기존

• 가상 DOM은 템플릿 구문을 가상 DOM 트리로 변환한 후 실제 DOM의 어떤 영역이 업데이트 되어야 하는지 재귀적으로 탐색하는 방식

  ⇒ 전체 DOM 트리를 재귀적으로 탐색해야만 하는 상황(전체 트리 탐색)

속성 바인딩

이중 중괄호는 HTML 속성 내에서 사용할 수 없음.

id속성을 컴포넌트의 dynamicId 속성과 동기화된 상태로 유지

바인딩된 값이 null or undefined이면 엘리먼트의 속성이 제거된 상태로 렌더링

<div v-bind:id="dynamicId"></div>

단축문법
<div :id="dynamicId"></div>

Vue.js 문법

1. createApp으로 Application instance 작성

   

2. application instance

   모든 vue 애플리케이션은 createApp 함수로 새 application instance를 생성하는 것으로 시작

   

3. app.mount()

   • 컨테이너 요소에 애플리케이션 인스턴스 연결
   • 각 앱 인스턴스에 대해 mount()는 한 번만 호출할 수 있음