Vue Component
화면의 영역을 구분하여 개발할 수 있는 뷰의 기능으로 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다
전역 컴포넌트와 지역 컴포넌트
<body>
<div id="app">
<app-header></app-header>
<app-content></app-content>
<app-footer></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 전역 컴포넌트 등록 방식
// Vue.component('컴포넌트 이름', '컴포넌트 내용');
Vue.component('app-header', {
template: '<h1>Header</h1>'
});
Vue.component('app-content',{
template: '<div>content</div>'
});
// 지역 컴포넌트 등록 방식(실제 서비스에서 많이 사용)
new Vue({
el: '#app', // app이라는 id를 가진 태그
components: {
// 'key': 'value' = '컴포넌트이름': '컴포넌트 내용'
'app-footer': {
template: '<footer>footer</footer>'
}
}
})
</script>
</body>
www.inflearn.com/course/Age-of-Vuejs/
Vue.js 시작하기 - Age of Vue.js - 인프런
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워
www.inflearn.com
joshua1988.github.io/vue-camp/
Cracking Vue.js
joshua1988.github.io
위 강좌를 통해 배운 내용을 정리한 것입니다.
'Study > Vue' 카테고리의 다른 글
| [Vue] HTTP 통신 라이브러리 - Axios 엑시오스 (0) | 2020.12.06 |
|---|---|
| [Vue] 뷰 라우터(router) (0) | 2020.12.06 |
| [Vue] 같은 컴포넌트 레벨 간의 통신 방법 (0) | 2020.12.06 |
| [Vue] 컴포넌트 통신 방식 Props, Event emit (0) | 2020.12.05 |
| [Vue] MVVM 패턴 & Reactivity (0) | 2020.12.01 |
댓글