Vue란?
MVVM((model-view-viewmodel) 패턴의 뷰모델(viewmodel) 레이어에 해당하는 화면 단 라이브러리이다.
뷰 인스턴스
인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다.
뷰 인스턴스 생성 예시
아래와 같이 코드를 작성하고 VS Code의 Open With Live Server 활용해서 띄운 후 개발자도구로 열어보면 데이터 메시지가 잘 뜬 것을 확인할 수 있다.
<!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>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hi'
}
});
</script>
</body>
</html>
인스턴스 속성
- el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그)
- template : 화면에 표시할 요소 (HTML, CSS 등)
- data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성
- methods : 화면의 동작과 이벤트 로직을 제어하는 메소드
- created : 뷰의 라이프 사이클과 관련된 속성
- watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
new Vew({
el: ,
template: ,
data: ,
methods: ,
created: ,
watch: ,
});
뷰 컴포넌트
컴포넌트는 화면의 영역을 구분해서 코드로 관리하는 기능이다.
전역 컴포넌트
전역 컴포넌트는 보통 플러그인이나 라이브러리를 등록할 때 활용한다.
전역 컴포넌트로 등록하면 인스턴스를 생성할 때마다 컴포넌트를 새로 등록하지 않아도 사용할 수 있다.
인스턴스를 생성하면 기본적으로 Root 컴포넌트로 인식한다.
아래와 같이 작성하고 개발자도구로 확인해보면 Root 컴포넌트 하위에 app-header, app-content 컴포넌트가 잘 등록된 것을 확인할 수 있다.
<!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>Document</title>
</head>
<body>
<div id="app">
<app-header></app-header>
<app-content></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
Vue.component('app-content', {
template: '<div>content</div>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
지역 컴포넌트
지역 컴포넌트 등록 방식으로 작성하면 특정 컴포넌트 하위에 어떤 컴포넌트가 있는지 확인이 용이하다.
보통 서비스를 구현할 때에는 지역 컴포넌트 등록 방식으로 작성한다.
지역 컴포넌트 등록 방법은 아래와 같다.
<!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>Document</title>
</head>
<body>
<div id="app">
<app-footer></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
components: {
// '컴포넌트 이름': 컴포넌트 내용,
'app-footer': {
template: '<footer>footer</footer>'
}
}
});
</script>
</body>
</html>
'개발 > Vue.js' 카테고리의 다른 글
| [Vue.js] 뷰 라우터 (0) | 2023.02.08 |
|---|---|
| [Vue.js] 같은 컴포넌트 레벨 간 통신 (0) | 2022.12.19 |
| [Vue.js] 컴포넌트 통신 방식(Props, Event) (0) | 2022.12.19 |
| [Vue.js] 시작하기 - 프로그램 설치 (0) | 2022.12.18 |