728x90
참고 문서
do it vue.js
컴포넌트란?
조합하여 화면을 구성할 수 있는 블록(화면의 특정영역)을 의미한다.
특징
- 컴퓨넌트를 활용하면 화면을 빠르게 구조화 하여 일괄적인 패턴으로 개발 할 수 있다.
- 쪼개서 사용하므로 재사용이 쉽다.
- 남이 작성한 코드를 직관적으로 이해 할 수있다.
컴포넌트를 이해 하기 위하 예제 구조 설명
뷰 에서는 웹화면을 구성할 때 흔히 사용하는 네비게이션바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리 합니다.
Tree 형식으로 구조화 되어 있다.
- Root
- Header
- Content
- Aside
- List
- Footer
컴포넌트 등록
- 전역(global))
- 여러 인스턴스에서 공통으로 사용한다.
- 뷰로 접근 가능한 모든 범위에서 사용할수있다.
- 지역(local)
- 특정 인스턴스에서만 유효한 범위를 갖는다.
1. 전역 컴포넌트 등록
전역 컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue변수를 이용하여 등록한다.
전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue생성자에서 .Component()를 호출 하여 수행하면된다.
Vue.compoent("컴포넌트 이름", { // 컴포넌트 내용 });- 컴포넌트 이름
- template 속성에서 사용할 HTML사용자 정의 태그(custom tag)이름을의 이름을 의미한다.
- 태그 이름의 명명 규칙은 HTML 사용자 정의 태그 스펙에서 강제 하는 '모든 소문자', '케밥 기법'을 따르지 않아도 된다.
- 케밥 기법 : 변수가 단어의 조합으로 이루어져 있을때, 단어와 단어 사이를 -로 잇는 변수 명명 방식
- 실제 화면의 HTML 요소로 변환 될때 표시될 속성들을 컴포넌트 내용에 작성한다.
- 컴포넌트 내용에는 template,data, methods등 인스턴스 옵션 속성을 정의 할수있다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue life Cycle</title>
</head>
<body>
<div id="app">
<button>컴포넌트 등록</button>
<!-- 전역 컴포넌트 표시 -->
<my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
// 전역 컴포넌트 등록
Vue.component("my-component", {
template: "<div>전역 컴포넌트가 등록되었습니다.</div>",
});
new Vue({
el: "#app",
});
</script>
</body>
</html>컴포넌트 처리 과정
- 뷰 라이브러리 파일 로딩
- 뷰 생성자로 컴포넌트 등록
- Vue.component()
- 인스턴스 객체 생성(옵션 속성 포함)
- 특정 화면 요소에 인스턴스 부착
- 인스턴스 내용변환
- 등록된 컴포넌트 내용도 변환
- my-component -> div로 변환 한다.
- 변환된 화면 요소를 사용자가 최종확인
2. 지역 컴포넌트 등록
지역 컴포넌트 등록은 전역 컴포넌트 등록과는 다르게 인스턴스에 components속성을 추가하고 등록할 컴포넌트 이름과 내용을 정의 하면된다.
new Vue({ componets: { '컴포넌트 이름': 컴포넌트 내용 } })예
<body>
<div id="app">
<button>컴포넌트 등록</button>
<!-- 전역 컴포넌트 표시 -->
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
var cmp = {
// 컴포넌트 내용
template: "<div>지역 컴포넌트가 등록되었습니다.!</div>",
};
new Vue({
el: "#app",
components: {
"my-local-component": cmp,
},
});
</script>
</body>지역 컴포넌트와 전역 컴포넌트 차이
<body>
<div id="app">
<h3>첫 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<div id="app2">
<h3>두 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
// 전역 컴포넌트 등록
Vue.component("my-global-component", {
template: "<div>전역 컴포넌트 입니다.</div>",
});
// 지역 컴포넌트 등록
var cmp = {
template: "<div>지역 컴포넌트입니다.</div>",
};
// 첫번째 인스턴스
new Vue({
el: "#app",
// 지역 컴포넌트 등록
components: {
"my-local-component": cmp,
},
});
// 두번째 인스턴스
new Vue({
el: "#app2",
});
</script>
</body>728x90
'FrontEnd > Vue' 카테고리의 다른 글
| Vue.js Module (0) | 2023.04.15 |
|---|---|
| Vue.js 프로젝트 생성 (0) | 2023.04.15 |
| [Vue.js] Router 기초 (0) | 2023.04.15 |
| Vue.js란? (0) | 2023.04.15 |
| Vue.js + spring 프로젝트 생성 (0) | 2023.04.15 |