- 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다
- 인스턴스는 뷰로 화면을 개발하기 위해 빠트릴 수 없는 필수 조건이다.
<html>
<head>
<title>
Vue Sample
</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<Script src = "http://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></Script>
<Script>
new Vue({
el:'#app',
data : {
message : 'Hello Vue.js'
}
})
</Script>
</body>
</html>
-> new Vue({}) : 인스턴스
->el 속성, data 속성
- 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할때 기존에 포함된 기능과 더불어 기존 기능을 쉽게 확장하여 사용하는 기법으로 일반적으로 객체 지향 프로그래밍에서 사용하는 객체 정의 방식으로 미리 정의된 속성과 메서드를 재활용하기 위해 사용
- new Vue()로 인스턴스를 생성할때 Vue를 생성자라 하는데 이는 뷰 라이브러리를 로딩하고 나면 접근 가능하다
- 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의 하여 편리하게 사용하도록 하기 위해서 이다.
- 뷰 인스턴스 옵션 속성 : 인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미함
인스턴스 유효 범위 : 뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타나는 이슈
인스턴스의 유효범위는 el 속성과 밀접한 관계가 있다.
- 인스턴스의 유효 범위는 el 속성으로 지정한 태그 아래에 오는 요소들로 제한된다.
- 인스턴스의 상태에 따라 호출 할 수 있는 속성들을 라이프 사이클이라고 하고 각 라이플 사이클 속에서 실행되는 커스텀 로직을 라이플 사이클 훅이라고 한다.
- 라이플 사이클 속성에는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestory, destoryed 와 같이 인스턴스의 생성, 변경, 소멸과 관련되어 총 8가지가 있다.
- 라이플 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스의 내용이 갱신, 인스턴스가 제거되는 소멸의 4단계로 이뤄진다.
'프로그래밍 이야기 > vue.js 공부' 카테고리의 다른 글
| 뷰 (Vue)개발자 도구 설치하기 (0) | 2023.08.14 |
|---|---|
| Vue.js 특징 MVVM패턴의 의미와 장점 컴포넌트기반 프레임워크 (0) | 2023.08.11 |
| Vue 프로젝트 매니저로 프로젝트 설치하기 (0) | 2023.08.01 |