TODO 예제 – 2. 요소 삽입 및 할일등록
TODO 프로젝트를 위한 두번째 작업으로 영역별로 필요한 요소를 삽입하고 기능을 넣어보도록 하겠습니다.
1.공통 스타일 선언
App.vue
<template>
<div id="app">
<TodoHeader></TodoHeader>
<TodoInput></TodoInput>
<TodoList></TodoList>
<TodoFooter></TodoFooter>
</div>
</template>
<script>
import TodoHeader from "./components/TodoHeader";
import TodoInput from "./components/TodoInput";
import TodoList from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
components : {
'TodoHeader' : TodoHeader,
'TodoInput' : TodoInput,
'TodoList' : TodoList,
'TodoFooter' : TodoFooter,
}
}
</script>
<style>
body {text-align:center;background-color:#f6f6f8}
input {border-style:groove;width:200px}
button {border-style:groove}
.shadow {box-shadow:5px 10px 10px rgba(0,0,0,0.03)}
</style>
공통으로 사용하는 input,button 등에 스타일링을 해줍니다.
2.헤더 영역 스타일 선언
TodoHeader.vue
<template>
<header>
<h1>TODO IT!</h1>
</header>
</template>
<script>
export default {
}
</script>
<style>
h1 {color:#2f3b52;font-weight:900;margin:2.5rem 0 1.5rem}
</style>
헤더 영역에 제목을 써주고 스타일링을 해줍니다.
3.인풋 영역 요소 삽입 및 스타일 선언
TodoInput.vue
<template>
<div class="inputBox shadow">
<input type="text" v-model="newTodoItem" placeholder="Type what you have to do" v-on:keyup.enter="addTodo">
<span class="addContainer" v-on:click="addTodo">
<i class="addBtn fa fa-plus" aria-hidden="true"></i>
</span>
</div>
</template>
<script>
export default {
data() {
return {
newTodoItem : ''
}
},
methods : {
addTodo() {
if (this.newTodoItem !== "") {
var value = this.newTodoItem && this.newTodoItem.trim();
localStorage.setItem(value,value);
this.clearInput();
}
},
clearInput() {
this.newTodoItem = '';
}
}
}
</script>
<style>
input:focus {ouline:none}
.inputBox {background:white;height:50px;line-height:50px;border-radius:5px}
.inputBox input {border-style:none;font-size:0.9rem}
.addContainer {float:right;background:#0080cc;display:inline-block;width:3rem;border-radius:0 5px 5px 0}
.addBtn {color:#fff;vertical-align:middle}
</style>
크게 영역별로 나눠서 살펴보겠습니다.
template 영역
<template>
<div class="inputBox shadow">
<input type="text" v-model="newTodoItem" placeholder="Type what you have to do" v-on:keyup.enter="addTodo">
<span class="addContainer" v-on:click="addTodo">
<i class="addBtn fa fa-plus" aria-hidden="true"></i>
</span>
</div>
</template>
입력한 할일을 바로 동기화 할 수 있게 v-model 디렉티브를 사용합니다.
또한 폼에서 enter키를 누를시에도 할일이 입력 되도록 합니다.
끝으로 버튼 클릭시에 할일이 입력 되도록 합니다.
script 영역
<script>
export default {
data() {
return {
newTodoItem : ''
}
},
methods : {
addTodo() {
if (this.newTodoItem !== "") {
var value = this.newTodoItem && this.newTodoItem.trim();
localStorage.setItem(value,value);
this.clearInput();
}
},
clearInput() {
this.newTodoItem = '';
}
}
}
</script>
newTodoItem의 값은 폼값에 바로 동기화 됩니다.
methods 에서 addTodo 메소드는 로컬 스토리지에 할일을 추가해주는데, 이때 빈값이 아닐때에만 실행하도록
예외처리를 해줍니다.
새로운 할일이 입력되면 폼값을 리셋해 줍니다.
style 영역
<style>
input:focus {ouline:none}
.inputBox {background:white;height:50px;line-height:50px;border-radius:5px}
.inputBox input {border-style:none;font-size:0.9rem}
.addContainer {float:right;background:#0080cc;display:inline-block;width:3rem;border-radius:0 5px 5px 0}
.addBtn {color:#fff;vertical-align:middle}
</style>
폼과 버튼의 배치를 해줍니다.
전체적으로 요소를 넣고, 동기화해야하는 데이터를 선언 및 사용하는 메소드를 등록해 줍니다.
이때 각 메소드들에는 예외처리를 해주도록 합니다.
크롬 개발자 도구의 vue 탭과 application > local storage 탭에서 등록되는 데이터를 확인 가능합니다.