Vue.js 소개
- Vue.js란 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크
- 구글 크리에이티브 랩스에서 근무하던 Evan You가 개발하였음
- 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계되었음.
- React의 장점인 가상돔, 단방향 데이터 흐름과 Angluar의 장점인 양방향 데이터 바인딩을 갖고 있는 프런트엔드 프레임워크.
Vue.js 특징
- 사용하기 쉬움 : 문법이 간편하고 작성하기 쉬움
- 기존 HTML 템플릿을 그대로 활용 가능
- MVVM (Model-View-ViewModel) 패턴
- Virtual DOM 사용
- 다양한 라이브러리와 프레임워크를 사용하여 확장이 가능
Vue.js 생명주기
- 단계는 크게 4가지로 나눠짐.
1. Creation(생성) 단계
- beforeCreate : 인스턴스가 생성되고 가장 처음으로 실행하는 단계, 아직 DOM에 컴포넌트가 추가되기 전 상태
- created : data와 events가 활성화되어 접근 가능
2. Mounting(장착) 단계
- beforeMount : 템플릿과 렌더 함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행됨
- mounted : 컴포넌트, 템플릿, 렌더링 된 돔에 접근 가능
3. Updating(갱신) 단계
- beforeUpdate : 데이터가 변하여 업데이트 사이클이 시작될 때 실행됨
- updated : 데이터가 변하여 재 렌더링이 일어나 후에 실행됨, 돔이 업데이트 완료된 상태이므로 돔 종속적인 연산을 할 수 있음
4. Destrucion(소멸) 단계
- beforeDestroy : 소멸되기 직전에 호출됨, 컴포넌트는 기본 기능 그대로 있으며, 이벤트 리스너 제거할 때 사용
- destroyed : 소멸된 후에 호출됨, Vue 인스턴스의 모든 디렉티브가 바인딩 해제되고 모든 이벤트 리스너가 제거되며 제거되며 모든 하위 Vue 인스턴스도 삭제됨
Vue.js 시작하기
- https://kr.vuejs.org/v2/guide/
카톡상담
02-3016-1018
