[to-do-app] Vue 컴포넌트 생성 및 등록

 

 

 컴포넌트 생성 및 등록 

우선 vue-cli 로 뷰 프로젝트를 만들면 생성되는 <HelloWorld/> 컴포넌트를 지워주겠습니다.

해당 파일은 components/ 폴더 밑에 있습니다.

또한 App.vue 파일도 기본 형태만 남기고 다 지워주겠습니다.

 

App.vue

<template>
	<div id="app">
		<todo-header />
		<todo-input></todo-input>
		<TodoList></TodoList>
		<TodoFooter />
	</div>
</template>

<script>
/* eslint-disable no-unused-vars */
import TodoHeader from "./components/TodoHeader.vue";
import TodoInput from "./components/TodoInput.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
	name: "App",
	components: {
		TodoHeader,
		TodoInput,
		TodoList,
		TodoFooter,
	},
};
</script>

<style></style>

컴포넌트를 등록할 때 총 4가지로 등록할 수 있습니다.

• <todo-header/>
• <todo-header></todo-header>
• <TodoHeader/>
• <TodoHeader><TodoHeader/>

보통 두번째나 세번째 방법을 선호합니다.

 

TodoHeader.vue

<template>
	<div>header</div>
</template>

<script>
	export default {};
</script>

<style></style>

 

TodoInput.vue

<template>
	<div>input</div>
</template>

<script>
	export default {};
</script>

<style></style>

 

TodoList.vue

<template>
	<div>list</div>
</template>

<script>
	export default {};
</script>

<style></style>

 

TodoFooter.vue

<template>
	<div>footer</div>
</template>

<script>
export default {};
</script>

<style></style>

 

 

 컴포넌트 생성 및 등록 

결과 화면입니다.

 

 

 

 

 

 

 

 

---