MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리
View - 사용자 화면에서 보여지는 화면(html),
html은 DOM이라는 걸 이용해서 자바스크립트로 조작할 수 있음.
특정 사용자가 키보드를 입력하거나 마우스로 클릭했을 때
ViewModel의 DOM Listeners가 청취하게 되어
자바스크립트에 있는(Model) 데이터를 바꿔주거나 자바스크립트에 있는 특정 로직에서 실행하게 된다.
자바스크립트에서 데이터가 변했을 때 Data Bindings을 타게 되는데
데이터가 변했을 때 Data Bindings을 타 화면(View)에 반영되게 된다.
Object.defineProperty()
객체의 동작을 재정의하는 property
-> 이를 사용하면 속성의 데이터가 변화할 때 마다 데이터가 속성에 할당되어
화면에 값이 변화하는 걸 확인할 수 있다.
:이 기능을 vue의 핵심인 Reactivity라고 한다. 한글로는 반응성이라고 한다.
즉시 실행(JS 문법)
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은
정의되자마자 즉시 실행되는 Javascript Function 를 말한다
(function () {
var aName = "Barry";
//내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
//IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.
})();인스턴스
뷰로 개발할 때 필수로 생성해야 하는 코드(단위)
*el : '#app'이라는 아이디를 가지고 있는 태그에 인스턴스를 붙이겠다는 의미를 가지고 있음.
이 태그 안에 있는 태그들로 모두 vue를 사용할 수 있음.
생성자 함수
Function 생성자는 새 Function 객체를 만든다.
이 생성자를 직접 호출하여 동적으로 함수를 생성할 수도 있으나,
보안 문제 및 eval과 유사한(그러나 훨씬 덜 심각한) 성능 문제가 발생할 수 있다.
Function 생성자는 전역 범위로 한정된 함수만 생성한다.
모든 JavaScript 함수는 사실 Function 객체다.
이는 (function(){}).constructor === Function이 true를 반환한다는 의미.
Function 인스턴스
Function 인스턴스는 Function.prototype에서 메서드 및 속성을 상속받음.
모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 바꿈으로써
모든 Function 인스턴스에 변화를 줄 수 있다.
vue 인스턴스 안에서 재사용할 수 있는 옵션들
- el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
- template : 화면에 표시할 요소 (HTML, CSS 등)
- data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성
- methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
- created: 뷰의 라이프 사이클과 관련된 속성
- watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
