1. 뷰 인스턴스
뷰 인스턴스는 뷰를 사용하기 위한 가장 기본 단위
뷰 컴포넌트가 레고 블럭이라면, 뷰 인스턴스는 레고 판 이라고 생각하면 된다.
A. 뷰 인스턴스 옵션 속성
el: 뷰 인스턴스를 마운트 할 태그 아이디
data: 뷰 인스턴스에서 다룰 데이터
template: 뷰 인스턴스 HTML 형태
methods: 뷰 인스턴스 메서드
created: 뷰 인스턴스 라이프사이클 훅(생성 직후)
B. 뷰 인스턴스 유효 범위
el 속성으로 지정한 태그 한정
C. 뷰 인스턴스 라이프 사이클
- beforeCreate
인스턴스 생성(new Vue())
- created
- beforeMount
인스턴스 부착
- mounted
(beforeUpdate)
(인스턴스 내용 갱신)
(updated)
beforeDestroy
인스턴스 소멸
destroyed
D. 예제 소스
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
beforeCreate: function() {
console.log("beforeCreate")
},
created: function() {
console.log("created");
},
mounted: function() {
console.log("mounted");
this.message = 'Hello modified Vue!'
},
beforeUpdate: function() {
console.log("beforeUpdate");
},
updated: function() {
console.log("updated");
}
})
</script>
</body>
</html>
E. 결과 화면(콘솔 로그)
2. 뷰 컴포넌트
뷰 컴포넌트 레고 블럭으로 비유된다.
화면을 모듈화 하여 중복 코딩을 방지하고, 화면 소스 구조의 일관성을 높일 수 있다.
A. 뷰 컴포넌트의 유효 범위
전역 컴포넌트는 모든 인스턴스에 적용 가능하다.
지역 컴포넌트는 components 속성으로 등록 된 인스턴스에만 적용 된다.
B. 전역 컴포넌트 로딩 순서
- 라이브러리 로딩 → 전역 컴포넌트 등록(Vue.component()) → 인스턴스 객체 생성
- 인스턴스 부착 → 인스턴스 내용 변환 + 컴포넌트 내용 변환
C. 예제 소스
<!DOCTYPE html>
<html>
<head>
<title>Vue Component</title>
</head>
<body>
<div id="app">
<h3>첫 번째 인스턴스</h3>
<global-component></global-component>
<local-component></local-component>
</div>
<hr>
<div id="app2">
<h3>두 번째 인스턴스</h3>
<global-component></global-component>
<local-component></local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
Vue.component('global-component', {
template: '<div>전역 컴포넌트</div>'
});
var cmp = {
template: '<div>지역 컴포넌트</div>'
}
new Vue({
el: '#app'
});
new Vue({
el: '#app2',
components: {
'local-component': cmp
}
})
</script>
</body>
</html>
D. 결과 화면
'Frontend' 카테고리의 다른 글
| Vue.js (5) 라우터 (0) | 2020.04.21 |
|---|---|
| Vue.js (4) 컴포넌트 간 통신 (0) | 2020.04.11 |
| Vue.js (2) 환경구축 (0) | 2020.04.11 |
| Vue.js (1) 시작 (0) | 2020.04.08 |
| Javascript로 외부 html 가공하기(feat. DOMParser) (0) | 2020.03.29 |
