[Vue.js] Vue.js란 (2)

호환성

Vue는 기본적으로 JavaScript 객체를 Vue 인스턴스 data 옵션으로 정의할 때 모든 속성들을 Object.defineProperty을 사용하여 Getter/Setter로 변환합니다. 이것은 ES5에서 새로 등장한 기능으로 하위호환이 불가능하기 때문에 Vue.js는 IE8 이하를 지원하지 않습니다.

 

---

특징

• MVVM 패턴을 사용합니다.

• MVVM 패턴

  

  
  Mode - View - ViewModel의 줄임말으로 로직과 UI의 분리를 위해 설계된 패턴입니다.
  웹페이지는 돔과 자바스크립트로 만들어지게 되는데 돔이 View 역할을 하고, 자바스크립트가 Model 역할을 합니다.
  뷰모델이 없는 경우에는 직접 모델과 뷰를 연결해야 합니다.
  그러나 뷰모델이 중간에서 연결해 주는 것이 MVVM 모델입니다.

• Virtual DOM의 사용합니다.
• Angular, React에 비해 매우 작고 가벼우며 복잡도가 낮습니다.
• Template과 Componenet를 사용하여 재사용이 가능한 사용자 인터페이스를 묶고 View Layer를 정리하여 사용합니다.

용어	설명
뷰(View)	사용자에게 보이는 화면
돔(DOM)	HTML 문서에 들어가는 요소(태그,클래스,속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너(DOM Listener)	돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델(Model)	데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩(Data Binding)	뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델(ViewModel)	뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

 

 

---

 

컴포넌트(Component)

화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것이 컴포넌트입니다.
Vue에서, 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스입니다.
전역 등록과 지역 등록 존재합니다.

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

 

---

 

 

 

생명주기

생명주기는 크게 Creation, Mounting, Updating, Destruction 으로 나눌 수 있습니다.
Creation : 컴포넌트 초기화 단계
Mounting : Dom 작성 단계
Updating : 상태 변화로 인한 렌더링 단계
Destruction : 소멸 단계

 

---

Vue인스턴스

 

new Vue로 선언하여 만들어진 객체를 vue 인스턴스라고 부릅니다.

• el : 태그에 지정한 ID, 클래스명, 태그명으로 해당 태그와 vue 인스턴스를 연결하는 옵션입니다.
• data : key와 value를 지정하는 json형식으로 데이터 입력 옵션입니다.
• computed : getter/setter를 지정하는 옵션입니다.

<div id = “app”
    {{message}}
</div>


<script>
var model = {
    message : “뷰 생성”
}

 new Vue({  
 //옵션
    el : ‘#app’,
    data : model
})

</script>

 

 

 

 

 

---

[ 참조 ]

https://wikidocs.net/17701

3. Vue.js란?

https://coding-start.tistory.com/213

Front-End - Vue.js란? 특징 및 장점?

https://velog.io/@leyuri/Vue.js-%EC%86%8C%EA%B0%9C

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

https://cntechsystems.tistory.com/100

Vue.js 란?

https://velog.io/@leyuri/Vue.js-%EC%86%8C%EA%B0%9C

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