1. 뷰 인스턴스
- 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성되어야 하는 기본 단위이다.
뷰 인스턴스 생성
New Vue ({
...
});뷰 인스턴스 형식은 위와 같다.
[Hello Vue.js 를 출력하는 샘플 코드]
<!DOCTYPE html>
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js" charset="utf-8"></script>
<script type="text/javascript">
new Vue({ // 인스턴스
el: '#app', // el 속성
data: { // data 속성
message: 'Hello Vue.js!'
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
뷰 인스턴스 옵션 속성
인스턴스를 생성할 때 재정의할 data, el, template 등의 속성을 의미한다.
예를 들어 위 예제에서는 data라는 미리 정의되어있는 속성을 사용했고 그 안에 message라는 새로운 속성을 추가해 Hellovue.js! 라는 값을 주었다.
el 속성 역시 미리 정의되어 있으며 뷰로 만든 화면이 그려지는 시작점을 의미한다.
예제에서의 '#app'은 돔 요소 중 app 이라는 아이디를 가진 요소를 의미하고 #선택자는 css선택자 규칙과 같다.
-
이외 미리 정의된 속성
-
Template : 화면에 표시할 HTML, CSS 등 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있음
-
Method : 화면 로직 제어와 관계된 메서드를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직을 추가할 수 있음
-
created : 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
-
뷰 인스턴스 옵션 속성
뷰 인스턴스를 생성하면 HTML의 특정 범위 안에서만 옵션 속성들의 적용되어 나타난다.
-
new Vue()로 인스턴스를 생성하고 나서 화면에 인스턴스 옵션 속성을 적용하는 과정
-
뷰 라이브러리 파일 로딩
-
인스턴스 객체 생성 (옵션 속성 포함) - el이 '#app', data에 {message:'Hello Vue.js!'} 옵션이 적용된 인스턴스가 생성됨
-
특정 화면 요소에 인스턴스를 붙임 - el 속성에 지정한 화면 요소 (<div id="app">{{message}}</div>)에 인스턴스가 부착됨
-
인스턴스 내용이 화면 요소로 변환 - 인스턴스에 정의한 옵션 객체의 내용 (data 속성)이 el 속성에 지정한 화면 요소와 그 이하 레벨의 화면 요소에 적용되어 값이 치환됨 ({{message}}와 data.message 가 치환됨) (<div id="app">Hello Vue.js!</div>)
-
변환된 화면 요소를 사용자가 최종 확인
-
=> 만약 예제 코드에서 {{message}}가 div id="app" 요소 바깥에 위치했다면 {{message}}는 치환되지 않고 화면에 그대로 출력되었을 것이다.
뷰 인스턴스 라이프 사이클
-
라이프 사이클 속성 : 인스턴스 상태에 따라 호출할 수 있는 속성들 (ex. created: 인스턴스가 생성되었을 때 호출할 동작을 정의하는 속성)
-
라이프 사이클 훅 : 라이프 사이클 속성에서 실행되는 커스텀 로직
-
- beforeCreate : 인스턴스 생성 후 가장 처음으로 실행되는 단계. data,methods 속성이 아직 인스턴스에 정의되어 있지 않고 돔과 같은 화면 요소에도 접근 불가
- created : beforeCreate 다음 실행되는 단계. data, methods 속성이 정의되어 접근 가능함. 인스턴스가 화면에 부착되기 전이므로 template에 정의된 돔 요소로 접근 불가
- beforeMount : create 이후 template 속성에 지정한 요소에 인스턴스를 부착하기 전에 호출되는 단계. render() 호출 이전 로직을 추가하기 좋음 (*render : dom을 그리는 함수)
- mounted : 인스턴스 부착 후 호출되는 단계, template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋음.
- beforeUpdate : 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다. (뷰의 반응성을 제공하기 위해 $watch 속성으로 감시하고 있음)
- Updated : 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계 (*이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있어 값 변경 시 computed, watch 속성을 사용해야 함. 값 변경은 되도록 beforeUpdate에 추가, 여기서는 돔과 관련된 로직을 추가하는 것이 좋음)
- beforeDestroy : 뷰 인스턴스가 파괴되기 직전에 호출됨. 아직 인스턴스에 접근 가능
- destroyed : 뷰 인스턴스 파괴 후 호출됨.
2. 뷰 컴포넌트
컴포넌트란? 조합하여 화면을 구성할 수 있는 블록이다.
컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다.
코드를 재사용하기 편리하고, 코드를 직관적으로 이해할 수 있다.
컴포넌트간의 관계는 뷰에서 화면을 구성하는 데 매우 중요하며 웹 페이지 화면을 설계할 때도 이와 같은 골격을 유지하며 설계해야 한다.
컴포넌트 등록하기
-
지역(Local) 컴포넌트 : 특정 인스턴스에서만 유효한 범위를 갖는다.
-
전역(Global) 컴포넌트 : 여러 인스턴스에서 공통으로 사용할 수 있다. (= 뷰로 접근 가능한 모든 범위에서 사용할 수 있다.)
전역 컴포넌트 등록
Vue.component('컴포넌트 이름', {
// 컴포넌트 내용
});[전역 컴포넌트 등록 형식]
-
이름 : template 속성에서 사용할 HTML의 이름
-
내용 : 컴포넌트 태그가 실제 화면의 HTML 요소로 변환될 때 표시될 속성들을 작성. template, data, methods 등 인스턴스 옵션 속성을 정의할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<button> 컴포넌트 등록 </button>
<my-component></my-component><!-- 전역 컴포넌트 표시 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vu<2.5.2/dist/vue.js" charset="utf-8
"></script>
<script type="text/javascript">
Vue.component('my-component' , {
template: '<div> 전역 컴포넌트가 등록되었습니다. </div>' // 전역 컴포넌트 등록
});
new Vue({
el:'#app'
});
</script>
</body>
</html>
전역 컴포넌트가 화면에 나타나기까지의 처리 과정
-
뷰 라이브러리 파일 로딩
-
뷰 생성자로 컴포넌트 등록 Vue.component()
-
인스턴스 객체 생성 (옵션 속성 포함)
-
특정 화면 요소에 인스턴스 부착
-
인스턴스 내용 변환 (등록된 컴포넌트 내용도 변환) [<my-component>가 <div>로 변환됨]
-
변환된 화면 요소를 사용자가 최종 확인
지역 컴포넌트 등록
new Vue({
components: {
'컴포넌트 이름': 컴포넌트 내용
}
});-
전역 컴포넌트 등록과 다르게 인스턴스에 components속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의한다.
-
컴포넌트 이름은 전역 컴포넌트와 마찬가지로 HTML에 등록될 사용자 정의 태그, 내용은 컴포넌트 태그가 화면 요소로 변환될 때 내용을 의미한다.
전역 컴포넌트와 지역 컴포넌트는 유효 범위가 다르다.
>> 전역 컴포넌트는 인스턴스를 생성할 때마다 등록할 필요 없이 어느 인스턴스에서든지 사용할 수 있지만, 지역 컴포넌트는 새로 인스턴스를 생성할 때마다 등록해줘야 한다.
'FE > vue' 카테고리의 다른 글
| vue project 를 Tomcat에 배포하기 (1) | 2020.11.19 |
|---|---|
| 4. 라우터 & HTTP 통신 (0) | 2019.07.10 |
| 3. 뷰 컴포넌트 통신 (0) | 2019.07.04 |
| 1. vue 개발 환경 구축 (0) | 2019.06.27 |
