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 탭에서 등록되는 데이터를 확인 가능합니다.