Vue - 빠른 학습을 위한 기록 잠정 중단

Vue

회사에서 바로 다음주에 새 프로젝트를 시작하게 되어 메모 잠시 중단하고 대충대충 쓴것들만 올려놓겠습니다.

그래도 아예 안하진 않고 조금씩 올릴거임

내 Vue Github Repository

---

학습한 목록

1. Basic-Without-Vue

• Without JS
• Vue 사용해보기

2. Start-Vue

• Vue를 이용한 DOM 상호작용 기본
• 보간법(Interpolation)
• v-bind 디렉티브 속성 바인딩
• Vue의 Method 이해하기
• v-html 디렉티브 이해하기
• Section2 과제 완료

3. Events

• Event Binding 이해하기
• Event Binding Method 이해하기
• Native Event Object
• Event Modifier
• Section3 과제 완료
• 양방향 바인딩
• Computed Property
• Watcher
• Methods & Computed & Watch 정리
• v-bind & v-on 축약어

4. Dynamic Styling

• Dynamic Styling - Class Binding
• Section4 과제 완료

5. Conditional Rendering

• Conditional Rendering: v-if,v-else.v-for
• V-for Advanced
• Section5 과제 완료

6. Monster Slayer Game 만들기

• Monster Slayer - 공격 기능 만들기

여기서 잠시 메모 일시중단 하고 강의 먼저 빠르게 듣고 다시 정리

---

빠른 강의 진행을 위해 설명 스킵하고 진행

• Component Custom Event & emit & props
• Global Component & Local Component
• Scoped Styling
• Slots & Named Slots & Scoped Slots
• Dynamic Component & Dynamic Component를 활성 상태로 유지하기
• Global & Local 컴포넌트
• Scoped Style (scoped가 붙으면 해당 컴포넌트에만 Style이 적용됨)
• Slot : 컴포넌트 외부에서 삽입되는 동적 HTML 코드의 PlaceHolder로 사용될 수 있음, 여러 슬롯을 사용할떈 슬롯 이름을 정해야 하며, 이름이 없는 슬롯은 Default 슬롯으로 지정된다.
• 동적 컴포넌트 : <component is="">
• 동적 컴포넌트를 활성상태로 유지 <keep-alive>
• <dialog open>
• Teleport : 컴포넌트 계층을 유지하면서 DOM의 구조를 조작하고 DOM에 추가되는 부분을 제어 <teleport to="">
• fragment : 상위 HTML Elements들을 Vue3부턴 여러개를 쓸 수 있음
• Convention