Vue 인스턴스 생성과 옵션

이전 블로그에서 Hello를 화면에 표시하는 실습과 Vue Instance에 대해서 언급했었다.

오늘은 Vue 인스턴스를 생성하고, 그 옵션 값에 대해 설명하려한다.

[Hello를 화면에 표시하는 실습]

https://brainmemory.tistory.com/36

[Vue Instance]

https://brainmemory.tistory.com/37

...

Hello를 화면에 표시하는 실습을 하면서 아래 그림을 첨부했었다.

Vue Instance에 대한 내용을 작성하면서 아래 그림을 첨부했었다.

그 중 "//......" 에 들어갈 수 있는 옵션들에 대해서 오늘 요약해보려고 한다.

options 들에는 아래 그림과 같이 template, el, data, methods, created 등이 있다. 

 

options	설명
template	화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성  ex ) div, button
el	화면이 그려지는 시작점을 지정
data	객체의 내용 설정
methods	화면 로직 제어와 관련된 메서드를 정의하는 속성  ex) 마우스 클릭 이벤트
created	뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성

Vue 인스턴스 생성자

new Vue( ... )로 인스턴스를 생성할 때 Vue를 생성자라고 한다.

Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근할 수 있다!!

생성자를 사용하는 이유?

Vue로 개발할 때 필요한 기능을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해서!!

(이거 왜 자바같지...???)

이상!!