4. 뷰 인스턴스

인스턴스는 뷰로 개발할때에 필수로 생성해야하는 코드라고 한다.

 

var vm = new Vue() 를 이용하여 인스턴스를 생성하여준다.

(new Vue()라고만 선언하여도 된다)

 

#el(엘리먼트) : body태그 안에서 app이라고 하는 아이디를 찾아 인스턴스를 붙이겠다는 의미를 가지고있다.
붙이는순간 vue기능과 속성들이 유효해진다. el이 없다면 아무리 데이터를 정의하여도 

div태그 안에서 사용이 불가능 하다.
new Vue로 만든 인스턴스를 꼭 특정태그에 붙여줘야만 vue를 사용할 수 있다.

 

생성자 함수를 정의하여 사용

위의 이미지에서는 Person이라는 생성자 함수를 만들었으나 우리는

첫 번째 이미지처럼 Vue를 생성자 함수로 만들어 사용한다.

 

#생성자 함수
함수앞에 함수이름 첫글자가 대문자라면 생성자 함수임을 의미한다.

 

#뷰를 이용하여 생성자 함수를 찍어내는 이유
미리 정의된 함수를 가져다 편리하게 사용하거나 재사용 할 수 있다.

 

#인스턴스의 속성, API들
el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
template : 화면에 표시할 요소 (HTML, CSS 등)
data : 뷰의 반응성(Reactivity)이 반영된 데이터 속성
methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
created : 뷰의 라이프 사이클과 관련된 속성
watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

 

생성자 함수의 가독성을 높이기 위해

생성자의 안에 객체를 통째로 넣어주는 표기법을 사용한다.

객체간의 구분은 ','로 구분한다.