뷰 인스턴스
01. 뷰 인스턴스의 정의와 속성
02. 뷰 인스턴스 옵션 속성
03. 뷰 인스턴스의 우효 범위
04. 뷰 인스턴스 라이프 사이클
01. 뷰 인스턴스의 정의와 속성
* 뷰 인스턴스 : 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위
new Vue({
...
});* 뷰 인스턴스 생성자 : 객체를 새로 생성할 때 자주 사용하는 옵션과 기능들을 미리 특정 객체에 저장해 놓고, 새로 객체를 생성할 때 기존에 포함된 기능과 더 불어 기존 기능을 쉽게 확장하여 사용하는 기법이다. (Vue)
뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위해 사용한다.
02. 뷰 인스턴스 옵션 속성
* 뷰 인스턴스 속성 : 뷰 인스턴스를 생성할 때 재정의할 data, el, template등의 속성
- el : 뷰로 만든 화면이 그려지는 시작점
html의 id
<div id="app">
{{ message }}
</div>인스턴스의 el 속성
new Vue({
el:"#app",
});css선택자 중 #은 해당 아이디를 가진 돔요소와 같다.
- template : 화면에 표시할 HTML, CSS등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다.
- methods : 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있습니다.
- created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성.
03. 뷰 인스턴스의 우효 범위
* 인스턴스의 우효 범위 : 뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들이 적용되어 나타남. el속성과 밀접한 관계가 있음.
* 인스턴스가 화면에 적용되는 과정
- 뷰 라이브러리 파일로딩
- 인스턴스 객체 생성 ( 옵션 속성 포함 )
- 특정 화면 요소에 인스턴스를 붙임
- 인스턴스 내용이 화면 요소로 변환
- 변환된 화면 요소를 사용자가 최종 확인
* 인스턴스 우효 범위 확인 :
<div id="app">
]
{{ message }} 우효범위
]
</div>
new Vue({
el:"#app",
});
04. 뷰 인스턴스 라이프 사이클
* 라이프 사이클(life cycle) 속성 : 인스턴스의 상태에 따라 호출할 수 있는 속성 / 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기
인스턴스의 생성, 변경, 소멸 관련 총 8개
- beforeCreate : 가장 처음으로 실행되는 라이프 사이클 단계. data 속성과 methods속성이 아직 인스턴스에 정의되어 있지 않고, 돔과 같은 화면요소에 접근할 수 없다.
- created :
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
* 라이플 사이클 훅(hook) : 각 라이프 사이클 속성에서 실행되는 커스텀 로직 / 개발자가 임의로 작성한 추가 로직
뷰 컴포넌트
01. 컴포넌트란?
02. 컴포넌트 등록하기
03. 지역 컴포넌트와 전역 컴포넌트의 차이
01. 컴포넌트란?
* 컴포넌트 : 조합하여 화면을 구성할 수 있는 블록 (화면의 특정 영역)
화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다.
정해진 방식대로 컴포넌트를 등록, 사용하게 되므로 코드 공유가 쉽다.
트리 : 컴퓨터 자료구조 중 하나. 노드끼리의 연결이 부모 - 자식의 구조를 따른다.
02. 컴포넌트 등록하기
1. 전역컴포넌트 등록하기
전역 컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다.
전역컴포넌트 등록 형식
Vue.component('컴포넌트 이름',{
//컴포넌트 내용
});* 컴포넌트 이름 : 속성에서 사용할 HTML 사용자 정의태그(custom tag)이름
* 컴포넌트 내용 : 실제 화면의 HTML 요소로 변환될 때 표시될 속성들 ( template, data, methods)등 인스턴스 옵션 속성을 정의할 수 있다.
전역컴포넌트 등록하기 예제
2. 지역컴포넌트 등록하기
하나의 인스턴스에 적용되므로 새 인스턴스를 생성할 때마다 등록해줘야한다.
지역컴포넌트 등록 형식
new.Vue({
component: {
'컴포넌트 이름': 컴포넌트 내용
}
});* 컴포넌트 이름 : 속성에서 사용할 HTML 사용자 정의태그(custom tag)이름
* 컴포넌트 내용 : 실제 화면의 HTML 요소로 변환될 때 내용
3. 전역컴포넌트와 지역컴포넌트의 차이
...
<div id="app">
<h3>첫 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
...
<script>
//전역컴포넌트 등록
Vue.component('my-global-component',{
templat: '<div>전역 컴포넌트입니다.</div>'
});
//지역 컴포넌트 내용
var cmp= {
template: '<div>지역컴포넌트입니다.</div>'
};
new Vue({
el: '#app',
components:{
'my-local-component':cmp
}
});
</script>
...<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Vue Component Registration</title>
</head>
<body>
<div id="app">
<header>
<h3>{{message}}</h3>
</header>
<todo-footer></todo-footer>
<todo-list></todo-list>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
Vue.component('todo-footer',{
template:'<p>This is another global child component</p>'
});
var cmp = {
template:'<p>This is another local child component</p>'
};
var app = new Vue({
el:'#app',
data:{
message:'this is a parent component'
},
components:{
'todo-list': cmp
}
});
</script>
</body>
</html>
뷰 컴포넌트 통신
01. 컴포넌트 간 통신과 우효 범위
02. 상,하위 컴포넌트 관계
03. 상위에서 하위 컴포넌트로 데이터 전달하기
04. 하위에서 상위 컴포넌트로 이벤트 전달하기
05. 같은 레벨의 컴포넌트 간 통신
06. 관계 없는 컴포넌트 간 통신 - 이벤트 버스
01. 컴포넌트 간 통신과 우효 범위
뷰는 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 왜냐하면 컴포넌트마다 자체적으로 고유한 유효범위를 갖기 때문이다. 각 컴포넌트의 유효범위가 독립적이기 때문에 다른컴포넌트의 값을 직접적으로 참조할 수 가 없다.
02. 상,하위 컴포넌트 관계
그러므로 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달방법을 따라야한다.
*** 상위(부모) - 하위(자식) 컴포넌트
* 상위하위 컴포넌트 간 통신 방식
상위 컴포넌트 --(prop전달)--> 하위 컴포넌트
상위 컴포넌트 <--(이벤트발생)-- 하위 컴포넌트
03. 상위에서 하위 컴포넌트로 데이터 전달하기
props 속성
상위에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성.
하위 컴포넌트의 props 속성 정의 방식
Vue.component('child-component',{
props: ['props 속성 이름'],
});상위 컴포넌트의 HTML코드
<child-component v-bind:props 속성 이름="상위 컴포넌트 data 속성"></child-component>...
<div id="app">
<child-component v-bind:prosdata="message"></child-component>
</div>
...
<script>
Vue.component('child-component',{
props:['propsdata'],
template: '<p>{{ propsdata }}</p>',
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue! passed from Parent Component'
}
});
</script>
...
04. 하위에서 상위 컴포넌트로 이벤트 전달하기
05. 같은 레벨의 컴포넌트 간 통신
06. 관계 없는 컴포넌트 간 통신 - 이벤트 버스
'개발 > Vue.js' 카테고리의 다른 글
| 05. 템플릿 & 프로젝트 구성 (0) | 2019.09.25 |
|---|---|
| 04-2. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 HTTP통신 (0) | 2019.09.24 |
| 04-1. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 라우터 (0) | 2019.09.06 |
| 02. Vue.js 필수 플러그인 - github (0) | 2019.08.25 |
| 01. Vue.js 소개 (1) | 2019.08.22 |
댓글