[Vue] Vue 란?(MVVM 패턴/적용해보기 예제)

Vue 란?

 

 - 사용자 인터페이슬 만들기 위한 동적 javascript 프레임 워크로, 프런트앤드 개발을 쉽게 하기 위한 오픈 소스 프레임 워크이다. 
-  Vue 라이브러리의 기초는 HTML,CSS 및 JS 이다.
-  Vue의 핵심 라이브러리는 양방향 데이터 바인딩을 사용하여 프로토타입과 뷰 구성 요소 간의 동적 조정을 가능하게 하는 뷰 모델 구성요소에 의존한다.
- MVVM(Model- View – ViewModel) 패턴의 ViewModel로, UI 코드와 데이터 제어 로 직을 분리하기 위해 설계된 패턴이다. 웹페이지는 돔과 자바스크립트로 만들어 지게 된다. 뷰 모 델이 없는 경우 직접 모델과 뷰를 연결해야 하는데, 뷰 모델을 중간에서 연결해 주는 것이 MVVM 이다.

 

MVVM 패턴이란?

 

 

View(html DOM) : DOM이 View 역할, 사용자에게 보여지는 화면
Model(JS) : 자바스크립트가 Model 역할, 데이터를 담는 용기로, 보통 서버에서 가져온 데이터를
                     javascript가 객체로 저장
ViewModel : view와 Model의 중간영역으로 DomListener와 DataBinding을 제공하는 영역

 

<용어 설명>

DOM : HTML 문서에 들어가는 요소의 정보를 담고있는 데이터 트리
DOM Listener : DOM의 변경에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
Data Binding : View에 표시되는 내용과 모델의 데이터를 동기화
Component(컴포넌트) : 화면에 비춰지는 뷰의 단위를 쪼개어 재활욜이 가능한 형태로 관리하는 것으로, Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스이다.

전역 등록, 지역등록이 존재한다. 또한 Vue는 재사용이 가능한 컴포터는로 웹페이지를 구성 할 수 있다. 확장자가 vue인 단일파일에 HTML,자바스크립트,CSS 코드로 구성하여 사용

 

 

실제 적용해보기

 

예제 1

 

 

 

•  New Vue();를 통해 vue.js 인스턴스를 생성해준다.

•  el ‘#app’ 선언을 통해 상단의 <div id=”app”> html 엘리먼트와 vue 인스턴스를 연결해준다.

•  이렇게 연결되면 <div id = “app”> html 엘리먼트 내에서 vue의 기능을 사용 할 수 있다.

•  data 옵션을 통해 데이터 입력, <div id = “app”> 내에 {{message}}를 사용하여 model 객체에 message 내용 출력

 

예제 2

 

 

위와 것과 동일한데 cdn을 통해 vue.js 스크립트 파일을 받아오고 , 여기에선 data 옵션에 바로 message를 선언하여 출력하였다.

 

<용어 설명>

el : el속성은 어떠한 id를 가진 html 태그에 종속될 것인지를 표기하는 것이다. 태그에 지정한 ID,클래스명, 태그명으로

      해당 태그와 vue 인스턴스를 연결하는 옵션

date : key와 value를 지정하는 json 형식의 데이터 입력 옵션

 

 

참고 블로그

https://happy-jjang-a.tistory.com/m/114

Vue.js란 무엇인가? - Hello World

 

생명주기 참고하기

 

https://wikidocs.net/17701

3. Vue.js란?