Vue 인스턴스란?
인스턴스란 무엇일까요? 인스턴스란 클래스, 오브젝트와 헷갈려 사용되곤 합니다. 이 용어를 쉽게 설명해줄 좋은 예는 붕어빵입니다.
- Class : 붕어빵 틀
- Object : 붕어빵
- Instance : 각각의 붕어빵
각 용어를 다음과 같이 비유해 봅니다. 클래스는 붕어빵 틀에 비유할 수 있으며 클래스는 붕어빵 즉 오브젝트를 생성할 수 있습니다. 그리고 인스턴스는 각각의 오브젝트 하나를 의미하게 됩니다.
즉 오브젝트는 추상적으로 대상을 표현하는 것이며 인스턴스는 지정된 오브젝트 하나를 의미합니다.
결국 Vue 인스턴스란 생성된 Vue 오브젝트 하나를 의미하게 됩니다.
Vue 인스턴스는 Vue 앱을 시작하기 위해 필수적이며, 앱의 진입점이 됩니다.
Vue 인스턴스는 간단한 템플릿 렌더링부터 데이터 바인딩, 컴포넌트 등 많은 동작을 합니다.
인스턴스 생성
Vue 인스턴스를 생성할 때 데이터, 템플릿, 메서드 등 옵션값을 전달할 수 있습니다. 이 옵션 값으로 인스턴스의 라이프사이클 훅, Vue 인스턴스가 작동할 엘리먼트를 지정(mount)할 수 있습니다.
간단한 예제를 작성해 보겠습니다.
html 파일을 생성한 후 아래와 같이 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = "app">
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el : "#app",
data : {
message : "Hello Vue...!"
}
})
</script>
</body>
</html>
html 파일을 생성해 보면
코드를 자세히 보면 el과 data가 있습니다.
el : Vue 인스턴스가 작동할 엘리먼트를 지정하는 옵션. 여기에는 css selector나 HTML element가 들어가야합니다.
data : Vue 인스턴스 내부에서 사용할 데이터 변수를 정의하는 옵션입니다. 여기에서는 message라는 데이터를 정의했습니다.
위 코드의 <div id = "app"></div> 내부에 {{와 }}로 message가 감싸진 모습을 볼 수 있으며 이것을 Mustache라는 Vue 인스턴스의 데이터를 출력하는 템플릿 문법입니다.
Vue 인스턴스는 많은 옵션을 가질 수 있으며, 그 중에서 가장 자주 쓰이는 것은 데이터와 메서드, 라이프 사이클입니다.
다음 글부터 위 세가지에 대해 자세히 알아보겠습니다.
'스터디 > VueJS' 카테고리의 다른 글
| Vue.js 스터디 _4. 라이프 사이클 (0) | 2019.05.15 |
|---|---|
| Vue.js 스터디 _3. 데이터와 메서드 (0) | 2019.05.07 |
| Vue.js 스터디 _1. 설치하기 (0) | 2019.04.30 |
| Express Vue 통합 프로젝트 환경 만들기 (Vue-Cli 3.6.3) (5) | 2019.04.18 |
| Vue.js 컴포넌트(Component) (0) | 2019.04.18 |
