오늘은 Vue.js step 2. 인스턴스(instance)에 대해 포스팅하려고 합니다.
Vue.JS에서 인스턴스란 Vue를 구성하는 가장 기본적인 베이스이며 객체이고,
Vue의 라이프사이클의 시작점으로 여러 동작들의 초기화 작업을 수행합니다.
일반적으로 var vm = new Vue({ // 옵션 }) 형태로 인스턴스를 생성하며, 인스턴스 생성자라고 표현합니다.
vue 인스턴스의 가장 대표적인 옵션은 다음과 같이 6가지가 있습니다.
| 옵션 | 설명 |
| el | Vue가 실행될 HTML의 DOM 요소를 지정. Vue 인스턴스에 연결할 HTML 요소 |
| data | Vue가 관찰하는 data 객체를 지정, 변경 사항을 즉시 감지 |
| computed | 화면 로직 제어와 관련된 함수를 정의하고 계산된 값을 리턴해줌 |
| methods | 화면 로직 제어와 관련된 함수를 정의하고 계산된 값을 리턴해줌 |
| watch | 지정된 변수를 지켜보다 값이 변경되었을 때 정의된 함수 실행. 비동기 처리가 필요한 경우 주로 사용 |
| template | 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성 |
이외에도 자주 사용하지는 않지만, 다음과 같은 옵션들도 있습니다.
| beforeCreate: Vue 인스턴스가 생성되기 전 created: vue 인스턴스가 생성된 후 beforeMount: Vue 인스턴스가 마운트되기 전 Mounted: Vue 인스턴스가 마운트된 후 beforeDestory: Vue 인스턴스가 파괴된기 전 Destory: Vue 인스턴스가 파괴된 후 beforeUpdate: Vue 인스턴스의 데이터가 변경되어 다시 렌더링하기 전 upDated: Vue 인스턴스의 데이터가 변경되어 다시 렌더링한 후 |
instance.html이라는 파일을 생성하여 아래 예제를 통해 인스턴스를 살펴보겠습니다.
기본 html태그 안에 vue.js를 import 하고 vue를 사용합니다.
vue 인스턴스 옵션중 el, data만 사용하여 보도록 하겠습니다.
DOM 영역인 body태그에 div에 인스턴스 객체와 연결할 수 있도록 el(엘리먼트)를 같은 이름의 "app"으로 선언합니다.
그리고 data와 임의 값인 message를 입력하여 값이 변경될 때마다
해당 DOM에서 바로 변경되는 것을 확인하실 수 있습니다.
<!-- instance.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el : '#app',
data: {
message: 'Hello Instance'
}
});
</script>
</body>
</html>
Visual Studio Code에서 instance.html를 마우스 우클릭 후 "Open with Live Server" 또는
키보드로 Alt +L + O를 입력하면 instance.html이 아래 그림과 같이 실행됩니다.
DOM영역 안에 message로 지정한 data의 값이 나타난 것을 확인 할 수 있습니다.
그리고 개발자 도구(F12)를 열어서 Vue를 확인하면 인스턴스의 Root태그가 보여지며,
해당 태그를 클릭해보면 data의 내용들을 확인 및 변경 할 수 있습니다.
참조 1) https://velog.io/@devchoi/Vue-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4
참조 2) https://www.bottlehs.com/vue/vue-js-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-&-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%86%8C%EA%B0%9C
지금까지 Vue.JS step 2. 인스턴스(instance)에 대한 포스팅이였습니다.
'Develope > Vue.JS' 카테고리의 다른 글
| [Vue.JS] step 4. 데이터 바인딩(data binding) (0) | 2022.05.04 |
|---|---|
| [Vue.JS] step 3. 컴포넌트(component) (0) | 2022.05.03 |
| [Vue.JS] step 1. 시작하기 - 환경설정 (0) | 2022.04.28 |
| [Vue.JS] error defined but never used no-unused-vars 해결방법 (0) | 2022.01.12 |
| [Vue.JS] $refs으로 Dom에 접근하는 방법 (0) | 2022.01.04 |
