Vue.js 개요
1. MVVM 패턴
① Model : 순수 자바스크립트 객체
② View : 웹페이지의 DOM
③ ViewModel : Vue의 역할
→ Vue는 View와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신이 가능
2. Vue Instance
① el : Vue가 적용될 요소를 지정/ CSS selector 또는 HTML 엘리먼트
② data : Vue에서 사용되는 정보 저장 / 객체 또는 함수형태
③ template : 화면에 표시할 HTML, CSS 같은 마크업 요소를 정의하는 속성 / 뷰의 데이터 및 기타 속성들을 모두 화면에 그리기 가능
④ methods : 화면 로직 제어와 관계된 method를 정의하는 속성 / 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가
⑤ created : 뷰 인스턴스가 생성된 직후 실행할 로직 정의
3. Vue Instance의 Life Cycle
① 생성
- beforeCreate : 뷰 인스턴스 생성과 각 정보 설정 전에 호출 / DOM 같은 화면 요소 접근 불가능
- created
: 뷰 인스턴스 생성 후 데이터 설정이 완료된 후 호출
: 인스턴스가 화면에 부착하기 전이기 때문에 template 속성에 정의된 DOM 요소는 접근 불가
: 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음
② 부착
- beforeMount : 마운트 시작 전 호출
- mounted
: 지정된 요소에 뷰 인스턴스 데이터가 마운트 된 후 호출
: template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행
③ 갱신
- beforeUpdate : 데이터 변경시 가상 DOM이 랜더링 / 패치되기 전에 호출
- updated
: 뷰에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태
: 데이터 변경 후 화면 요소 제어와 관련된 로직 추가
④ 소멸
- beforeDestroy : 뷰 인스턴스가 제거되기 전에 호출
- destroyed : 뷰 인스턴스가 제거된 후 호출