이 기사는 Vue.js의 정의, 특성 및 패턴을 기록합니다. SSAFY에서 Vue.js를 배우고 프로젝트를 진행했는데 복원하는 측면에서 공부하고 있습니다.
색인
1. Vue.js란?
2. MVVM(모델 – 보기 – 보기 모델)
3. Vue.js의 특징
1. Vue.js란?
2014년 Evan You가 만든 것으로 서버의 부담을 보다 쉽고 효율적으로 줄이고 Web UI 컨트롤 및 Web Application의 Front-end 개발이 가능한 JavaScript 프레임워크입니다. 이 Vue.js는 MVVM(Model – View – View Model) 패턴을 기반으로 설계되었으며 재사용 가능한 UI를 번들로 묶어 재사용할 수 있습니다.
2. MVVM(모델 – 보기 – 보기 모델)
MVVM은 Model, View, View Model로 구성되어 있는데 Spring MVC 패턴에서 흔히 볼 수 있듯이 Controller(C)가 아닌 View Model로 바뀐 개념이라고 볼 수 있다. View Model은 View에 필요한 데이터와 이벤트를 포함하는 컨테이너 개념입니다.
즉, 위의 그림을 보면 MVVM은 Model, View, View Model로 구성되어 있습니다. View Model은 View와 Model 사이에 위치하므로 Model에서 비즈니스 로직과 데이터를 가져와 처리하고 View에 대한 데이터 바인딩을 수행합니다. 사용자에게 표시합니다. 여기서 View는 데이터 바인딩을 하기 때문에 View Model과의 결합이 느슨하여 의존성이 줄어들고 UI단과 로직단의 분리가 비교적 명확하게 구분될 수 있다.
3. Vue.js의 특징
Vue.js의 기능은 다음과 같습니다.
1) AngularJS 및 ReactJS에 비해 상대적으로 작고 가벼우며 복잡도가 낮습니다.
2) View 단계를 중심으로 만들어진 프레임워크입니다.
-> 서버의 부하를 줄이고 눈에 보이는 UI 요소(View)에 집중
3) 가상 DOM을 사용합니다.
-> DOM은 View의 역할을 하고 JavaScript는 Model의 역할을 합니다.
4) 데이터 바인딩을 사용하십시오.
5) 구성 요소를 사용하십시오.
-> Vue.js에서는 데이터바인딩을 사용하는데 여기서 공통점이 있다면 컴포넌트화를 하고 이 컴포넌트를 미리 정의된 옵션을 가진 Vue 인스턴스라고 합니다. 따라서 이 구성 요소도 전역 및 로컬로 나눌 수 있습니다.
6) 이벤트 처리를 사용하십시오.
7) 애니메이션, 효과 및 라우팅을 사용합니다.
참조