[vue.js] todoList 만들기(Do It Vue.js 입문)

1. vue-cli 설치

npm install vue-cli -global

vue init webpack-simple

npm install

vue.js devTool 설치 먼저 진행한다.

npm run dev

프로젝트 내 index.html 파일에서 다음과 같이 <meta> 태그를 추가한다.

<meta name = "viewport" content="width=device-width, initial-scale=1.0">

viewport 메타 태그를 추가하면 모바일 웹에서도 레이아웃이 깨지지 않는다.

• 어썸 아이콘 css 설정
  

• 폰트와 파비콘 설정

/src/assets 경로에 파비콘 파일을 복사한다.

2. 컴포넌트 생성 및 등록

• 컴포넌트 생성

src 폴더에 components 폴더를 생성하고

Header / Footer / Input / List vue 파일을 각각 생성한다.

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

<script>
export default{

    
}
</script>



<style>

</style>

• 컴포넌트 등록

src/App.vue 에서 기존 코드 내용을 지우고 다음과 같이 남긴다.

<template>
    <div id="app"></div>
</template>

<script>
export default{

    
}
</script>



<style>

</style>

• 다음과 같이 입력한다.

<template>
    <div id="app">
        <TodoHeader></TodoHeader>
        <TodoInput></TodoInput>
        <TodoList></TodoList>
        <TodoFooter></TodoFooter>
    </div>
</template>

<script>
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{
    components:{
        'TodoHeader' : TodoHeader,
        'TodoInput' : TodoInput,
        'TodoList' : TodoList,
        'TodoFooter' : TodoFooter
      }
}
</script>



<style>

</style>

• 컴포넌트 생성 확인

3 . 컴포넌트 내용 구현

• components/TodoHeader.vue 파일 <style> 태그에 css를 입력한다.

<template>
    <header>
        <h1>TODO it!</h1>
    </header>
</template>

<script>
export default{


}
</script>

<style scoped>
    h1{
        color : #2F3B52;
        font-weight : 900;
        margin : 2.5rem 0 1.5rem
    }

</style>

• App.vue 파일

<template>
    <div id="app">
        <TodoHeader></TodoHeader>
        <TodoInput></TodoInput>
        <TodoList></TodoList>
        <TodoFooter></TodoFooter>
    </div>
</template>

<script>
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{
    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>

• TodoInput 컴포넌트

component/TodoInput.vue 파일

<template>
    <div>
        <input type="text" v-model="newTodoItem">
        <button>추가</button>
    </div>
</template>

<script>
export default{
    data(){
        return{
            newTodoItem:''
        }
    }
}
</script>


<style>

</style>

• TodoInput에 이벤트 추가

<template>
    <div>
        <input type="text" v-model="newTodoItem">
        <button v-on:click="addTodo">추가</button>
    </div>
</template>

<script>
export default{
    data(){
        return{
            newTodoItem:''
        }
    },
    methods : {
        addTodo(){
            console.log(this.newTodoItem)
        }
    }
}
</script>


<style>

</style>

 methods : {
        addTodo(){
            localStorage.setItem(this.newTodoItem, this.newTodoItem)
        }
    }

• addTodo() 예외처리 코드 추가

<template>
    <div>
        <input type="text" v-model="newTodoItem">
        <button v-on:click="addTodo">추가</button>
    </div>
</template>

<script>
export default{
    data(){
        return{
            newTodoItem:''
        }
    },
    methods : {
        addTodo(){
            if(this.newTodoItem !== ""){
            let value = this.newTodoItem.trim();
            localStorage.setItem(value, value);
            this.clearInput();
            }
        },
        clearInput(){
            this.newTodoItem = '';
        }
    }
}
</script>


<style>

</style>