Vue.js란? Vue.js 개발을 위한 주요 ES6 문법 8가지

 

VueJS는 비교적 최근에 등장한 JavaScript Framework입니다.

또한 SPA(Single Page Application) 개발을 위한 프론트엔드 프레임워크로, 한 페이지에서 여러 데이터를 바인딩 처리해야하는 경우 유용하게 활용할 수 있습니다. 

• View(html DOM): 사용자에게 보이는 화면. 
• Model(JS): 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체로 저장
• ViewModel: View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역
• DOM: HTML 문서에 들어가는 요소(tag, class, attribute 등)의 정보를 담고 있는 데이터 트리
• DOM Listener: DOM의 변경에 대한 즉각적으로 반응하여 특정 로직을 수행하는 장치
• Data Binding: View에 표시되는 내용과 모델의 데이터를 동기화
  - Vue에서는 기본적으로 단방향 데이터바인딩으로 컴포넌트간 통신은 상위 컴포넌트->하위컴포넌트로 전달
•  

장점

• 배우기 쉽다
• React, Angular에 비해 가볍고 성능이 빠름
• React(Virtual DOM), Angular(데이터 바인딩)의 장점을 취했음
• 컴포넌트 기반 프레임워크로 레고 블록과 같은 컴포넌트 조합으로 뷰 구성, 코드 재사용 쉬움

Virtual DOM
화면에 변화가 있을 때마다 실시간으로 DOM Tree 를 수정하지 않고 변경사항이 반영된 Virtual DOM을 이용해 메모리에서 처리하고 한 번만 DOM 수정을 한다. 결과적으로 브라우저는 한번만 렌더링을 하게 됨으로써 불필요한 렌더링 횟수를 줄여 렌더링 성능을 높인다

 

Vue의 속성

1. el

2. data : Vue에서 사용되는 정보 저장, 객체 또는 함수의 형태

- ajax를 통해 서버로 부터 전달받은 데이터를 세팅 할 때에는 

data(){
	return{
		message : "text"
	}
}

 위와같이 사용해야한다.

3. template

4. methods

5. created

 

Vue.js 개발을 위한 주요 ES6 문법 8가지

1. 클래스
2. 화살표 함수
3. 변수 선언(var,let,const)
4. 배열 메서드 - map())
5. 배열 구조화 
6. 모듈 
7. 삼항연산자
8. 스프레드 연산자(객체/배열 합침)

-> 위의 것들은 차후 순차적으로 다뤄볼 예정!