VUE

1. MVVM패턴의 등장
2. spa개발 방식의 대중화
3. 모듈화와 빌드 도구와 등장
4. 컴포넌트 기반 개발

위 네가지의 욕구로 인해서 현대 프레임워크가 생겼다.

컴포넌트 기반 개발의 등장

• 버튼이나 카드 등의 반복적으로 사용되는 재사용 가능한 모듈로 만들어주는 것이
• 컴포넌트 이다.

vue는 더 직관적이고 간소화되면서 현대적인 MVVM 프레임워크 개념으로 정립되었다.

vue 의 핵심 개념

현대 프레임워크는 자동 렌더링을 어떻게 해줄까?

• 넉아웃은 observable : observable에 있는 값을 변경하게되면 리렌더링 해준다.

• 앵귤러는 Zone : 이벤트나 비동기모듈이 발생하게되면 (특정시점) 그 앞뒤를 비교해서 감지해서 바뀐게 있으면 리렌더링 해준다.

• vue는?
  1. Reactivity
• 프록시 기반으로 (a=3) 과 같은 할당문을 바탕으로 할당 될 때마다 업데이트를 하는 방식을 사용한다.

1. Directive

- 문법
1. Text Binding ex) <div></div>
2. Attribute Binding ex) <div:id=""> , <img:src="">
3. Event Listener ex) <div @click="">

4. Form Bind v-model ex) v-model:<input v-model="data"/>
- form control의 value변화에 model릐 값을 변경하고, model의 값의 변경에 따라 control의 value값이 변경하는 기능

5. 조건부 렌더링과 리스트 렌더링
- v-if: 조건이 되었을때만 보이는 지시자. 주로 템플릿과 함께 사용됩니다. <template v-if="cond">...</template>
- v-for: foreach와 유사하게 배열등과 같은 목록형 컨텐츠를 생성하는 지시자. <template v-for="todo in todos">...</template>

모델의 변화

• 계산된 속성과 감시자
  1. computed: 기존 모델 데이터로부터 유도되는 값을 만드는 기능
  2. watch: 기존 모델의 값이 변경이 될때마다 처리할 수 있는 기능

뷰의 컴포넌트

• Component, Props, Emit, Slot
  1. Component: 화면과 기능이 결합된 재사용이 가능한 UI 조각
  2. Props: 컴포넌트에게 필요한 데이터를 전달하기 위한 방법. (like. 함수의 Argument)
  3. Emit: 자식 컴포넌트에서 부모컴포넌트로 이벤트를 전달하는 방법. (like. DOM Event bubble)
  4. Slot: 컴포넌트의 빈 부분을 외부에서 채울 수 있도록 제공하는 기능

컴포넌트 생명주기와 템플릿

• life cycle, template mounted,unMounte,beforeCreate,created..
• ref : DOM 엘리먼트에 직접 접근하기 위한 지시어

About 유재석

개발자 유재석 입니다. Web Developer.

Email : jaeseok9405@gmail.com

Website : https://github.com/yoo94