컴포넌트 폴더에 TodoHeader.vue, TodoInput.vue, TodoList.vue, TodoFooter.vue 파일 생성
<template>
<div>Header</div>
</template>
<script>
exportdefault {
}
</script>
<style>
</style>
App.vue에 컴포넌트 등록
importTodoFooterfrom'./components/TodoFooter.vue'
importTodoHeadefrom'./components/TodoHeader.vue'
importTodoInputfrom'./components/TodoInput.vue'
importTodoListfrom'./components/TodoList.vue'
exportdefault {
components: {
'Header':TodoHeade,
'Input':TodoInput,
'List':TodoList,
'Footer':TodoFooter
}
}
컴포넌트 태그들을 div#app 태그 안에 추가
<divid="app">
<TodoHeader></TodoHeader>
<TodoInput></TodoInput>
<TodoList></TodoList>
<TodoFooter></TodoFooter>
</div>
기본 스타일 적용
body {
text-align: center;
background-color: #f6f6f8;
}
TodoHeader.vue
헤더에는 앱의 이름을 표시한다.
<template>
<header>
<h1>TODO</h1>
</header>
</template>
<stylescoped>
h1 {
font-weight: 200;
}
</style>
scoped는 스타일을 해당 컴포넌트에만 적용하겠다는 의미이다.
TodoInput.vue
입력을 받기 위한 input 태그와 텍스트 값을 저장하기 위한 button 태그를 추가한다. 인풋 박스에 텍스트를 입력했을 때 뷰 인스턴스에서 텍스트 값을 인식할 수 있게 v-model 디렉티브와 데이터 속성 newTodoItem을 추가한다.
<template>
<inputtype="text"v-model="newTodoItem">
<button>add</button>
</template>
<script>
exportdefault {
data() {
return {
newTodoItem:''
}
}
}
</script>
인풋 박스에 입력한 값이 뷰에서 잘 인식된다. 이제 입력된 값을 데이터 저장소인 로컬 스토리지에 저장해야 한다. add 버튼을 클릭하면 특정 동작을 수행할 수 있도록 v-on:click에 버튼 이벤트 addTodo를 추가한다. 버튼 이벤트 로직은 methods에서 정의한다.
<template>
<inputtype="text"v-model="newTodoItem">
<buttonv-on:click="addTodo">add</button>
</template>
<script>
exportdefault {
data() {
return {
newTodoItem:''
}
},
methods: {
addTodo() {
console.log(this.newTodoItem);
}
}
}
</script>
버튼이 잘 작동하는지 확인하기 위해 데이터 값을 콘솔로 찍어본다.
버튼 이벤트가 잘 작동하므로 입력값을 로컬 스토리지에 저장한다. 로컬 스토리지에 데이터를 추가하는 setItem() API를 사용한다.