Vue.js

• Evan You에 의해 만들어짐
• Approachable(접근성)
• Versatile(유연성)
• Performant(고성능)

MVVM Pattern

• Model + View + ViewModel
• Model: 순수 자바스크립트 객체
• View: 웹페이지의 DOM
• ViewModel: Vue의 역할
• 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리 이용
• Vue는 view와 model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함

<script>
	new Vue({
		el: "#app",
		data() {
			return {
				msg: "Hello, World!",
			}
		}
	});
</script>

인스턴스가 화면에 적용되는 과정

1. 뷰 라이브러리 파일 로딩
2. 인스턴스 객체 생성(옵션 속성 포함)
3. 특정 화면 요소에 인스턴스 붙임
4. 인스턴스 내용이 화면 요소로 변환
5. 변환된 화면 요소를 사용자가 최종 확인

Vue Instance Life Cycle

• 생성, 부착, 갱신, 소멸
• beforeCreate: Vue Instance가 생성되고 각 정보의 설정 전 호출. DOM과 같은 화면 요소 접근 불가
• created: Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출. Instance가 화면에 부착하기 전이라 template 속성에 정의된 DOM 요소는 접근 불가. 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음
• beforeMount: 마운트가 시작되기 전 호출
• mounted: 지정된 element에 Vue Instance 데이터가 마운트 된 후 호출. template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직 수행
• beforeUpdate: 데이터가 변경될 때 가상 DOM이 렌더링, 패치 되기 전 호출
• updated: Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트됨. 데이터 변경 후 화면 요소 제어와 관련된 로직 추가
• beforeDestroy: Vue Instance가 제거되기 전 호출
• destroyed: Vue Instance가 제거된 후 호출

Interpolation

• 문자열
  • 데이터 바인딩의 가장 기본 형태는 “Mustache” 구문
  • {{ 속성명 }}
  • v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간 수행
• 이중 괄호는 일반 텍스트로 데이터를 해석하기 때문에 HTML을 출력하려면 v-html 사용
• Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원
• 단, 하나의 단일 표현식만 포함될 수 있음

Directive

• v-model: 양방향 바인딩 처리
• v-bind: 엘리먼트의 속성과 바인딩 처리
• v-show: 조건에 따라 엘리먼트를 화면에 렌더링 → style의 display를 변경시킨다.
• v-if, v-else-if, v-else: 조건에 따라 엘리먼트를 화면에 렌더링(조건에 안맞으면 아예 렌더링 X)
• v-for: 배열이나 객체의 반복에 사용. v-for(”요소 변수 이름, 인덱스) in 배열”