Vue에서 인스턴스(Instance)란
Vue.js로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 오브젝트 단위입니다.
이러한 인스턴스는 다양한 동작을 수행할 수 있는 옵션을 가지고 있습니다.
Vue 인스턴스의 생성자는 아래의 코드와 같습니다. 다양한 옵션으로 인스턴스를 구성할 수 있습니다.
new Vue(...)
인스턴스의 옵션들
* computed와 watch는 비슷한 설명을 가지는 데, 이에 대해 이후 자세한 내용으로 게시할 예정입니다.
| 옵션 명 | 설명 | 예제 |
| el | 대상이 되는 HTML의 DOM 요소를 지정 id가 부여된 태그를 일반적으로 지정 |
el : '#class_name' |
| data | Vue 인스턴스가 담고있을 데이터를 생성 | data : { num : 1 } |
| template | HTML, CSS 등을 이용하여 화면에 표시하고자 하는 내용 콧수염 괄호( "{{ }}" )를 사용하여 data객체를 출력 가능 |
template : '<html태그명>.....{{num}}</html태그명>' |
| computed | 데이터 값의 변경에 반응하여 특정 값을 반환 정의된 함수 내의 데이터에 의존성을 가짐 |
computed : { computed_name : function (){ ..... } } |
| watch | Vue인스턴스의 특정 값을 감시 값이 변경되었을 때, 정의한 함수를 실행 |
watch : { watch_name : function (){ ..... } } |
| methods | 함수로 정의하여 호출될때마다 실행 data 객체 등을 사용하여 내부 로직을 실행 |
methods : { method_name : function (){ ..... } } |
인스턴스 생성 예시
위의 설명을 토대로 인스턴스를 생성합니다.
computed, watch, methods 옵션은 이휴 뷰 디렉티브와 함께 연동하여 실습 및 설명이 있을 예정이기 때문에, 이번 게시물에서는 제외하고 실습을 진행하겠습니다.
Vue CLI에 대한 내용을 다루기 전에는 HTML파일에 Vue CDN을 부르는 방법으로 실습을 진행할 예정입니다.
또한, 이러한 실습은 Visual Code에서 Live Server를 통해 결과물을 확인할 것 입니다.
CDN으로 Vue를 사용하는 방법
<!-- 최신버전으로 Vue 이용하기 (최신버전) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 최신버전으로 Vue 이용하기 (특정버전) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js@n.n.n"></script>아래 코드를 간략히 설명하자면
<div>태그에 id가 부여되어 있으면 이러한 id와 Vue 인스턴스의 'el'옵션을 이용하여 생성한 인스턴스를 html을 통해 화면단에서 자유롭게 표현할 수 있습니다.
또한, 인스턴스 내부에 선언한 'data' 또한 콧수염 기호("{{ }}")를 사용하여 화면단에 표현 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-eqiv="X-UA-Compatible" content="ie=edge">
<title>인스턴스 예제</title>
</head>
<body>
<div id="app">
<p>str은 {{str}}</p>
<p>num은 {{num}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
str: "hi",
num: 5
}
});
</script>
</body>
</html>
코드 결과
코드 결과를 확인하면 인스턴스내에 정의한 'str'과 'num'의 값의 출력을 확인 할 수 있습니다.
또한, 개발자 모드의 vue devtool을 확인하면 해당 인스턴스에 num:5, str:"hi"의 값이 할당된 것을 확인할 수 있습니다.
참조
[강의] 인프런 - Vue.js 시작하기 - Age of Vue.js(캡틴판교) https://www.inflearn.com/course/age-of-vuejs
'Vue' 카테고리의 다른 글
| [Vue] 뷰 라우터 (0) | 2022.05.16 |
|---|---|
| [Vue] 상하관계가 아닌 컴포넌트간 통신 (0) | 2022.04.25 |
| [Vue] 컴포넌트간 통신(event, props) (0) | 2022.04.22 |
| [Vue] 컴포넌트 (0) | 2022.04.13 |
| [Vue] Vue.js 소개 (1) | 2022.04.04 |
댓글