To do List 만들기_(3) 각각의 컴포넌트에 기능 구현

<목차>

(1) 컴포넌트의 기본 프레임 잡기 

(2) 컴포넌트의 통신 props,event 

(3) 각각의 컴포넌트에 기능 구현 

 

 

결국 모든 컴포넌트의 코드는 아래와 같고 주석으로 써논 설명을 보면 이해를 할 수 있을것이다.

 

<App.vue>

<template>
    <div id="app">
        <TodoHeader></TodoHeader>
        <TodoInput v-on:addTodoo="addTodo"></TodoInput>
        <TodoList v-bind:propsdata="todoItems" v-on:removeTodo="removeTodo"></TodoList>
        <TodoFooter v-on:removeAll="clearAll"></TodoFooter>
        
    </div>


</template>

<script>
import TodoHeader from './components/TodoHeader';
import TodoInp from './components/TodoInput';
import TodoLit from './components/TodoList';
import TodoFoot from './components/TodoFooter';


export default {
    data(){
        return {
            todoItems: []
        }
    },
    created: function() { 
    if (localStorage.length > 0) {
      for (var i = 0; i < localStorage.length; i++) {
        if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {
          this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
      }
    }
  },
    methods: {
        addTodo(todoItem){
            //로컬스토리지에 데이터를 추가하는 로직
            localStorage.setItem(todoItem, todoItem);
            this.todoItems.push(todoItem);
        },
        removeTodo(todoItem, index) {
            //각각 삭제 하는 역할.                 
            localStorage.removeItem(todoItem);
            this.todoItems.splice(index, 1);
        },
        clearAll(){
            //로컬스토리지 전체 삭제, todoItems 초기화
            localStorage.clear();
            this.todoItems = [];
        }
    },    
    components: {
        'TodoHeader': TodoHeader,
        'TodoInput': TodoInp,
        'TodoList': TodoLit,
        'TodoFooter': TodoFoot
    }
}
</script>


<style>
  body{
  text-align: center;
  background-color: #9880db;
  }
  input{
  border-style: groove;
  width: 200px
}
  button{
    border-style: groove;
  }
  .shadow{
  box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03)
  }
</style>

<TodoHeader.vue>

<template>
  <div>
    <header>
      <h1>{{homeTitle}}</h1>   
         
      <button v-on:click="changename"> 만든이</button>  
      
    </header>
     
  </div>
</template>



<script>
export default {
  data(){
    return{
      homeTitle: "TODo_list"
    }
  },
  methods:{
    changename:function(event){
      alert('애플파ol')
      if(event){
        alert(event.target.tagName)
      }
    }
  }

}
</script>




<style scoped>                        
h1{
  color: #5d54e0;
  font-weight: 900;
  margin: 2.5rem 0 1.5rem;
}
button{
  color: rgb(119, 18, 18);
  background: rgb(236, 236, 70);
}

</style>

<TodoList.vue>

<template>
    <section>
        <ul>
            <li v-for="(todoItem, index) in propsdata" :key="todoItem">
                {{ todoItem }}  <!-- li태크를 반족적으로 만들어냄 -->
                <button type="button" v-on:click="removeTodo(todoItem, index)">삭제</button> <!-- 삭제버튼 클릭시 removeTodo 함수 작동 -->
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    props: ['propsdata'],
    methods: {
    	removeTodo(todoItem, index){
            this.$emit('removeTodo', todoItem, index);
        }
    }    
}
</script>


<style scoped>
ul {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  text-align: left;
}
li {
  display: flex;
  min-height: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0.5rem 0;
  padding: 0 0.9rem;
  background: white;
  color: blue;
  border-radius: 5px;
}

.checkBtn {
  line-height: 45px;
  color: #263844;
  margin-right: 5px;
}
.checkBtnCompleted {
  color: #b3adad;
}
.textCompleted {
  text-decoration: line-through;
  color: #b3adad;
}
.removeBtn {
  margin-left: auto;
  color: #de4343;
}
</style>

 

<TodoInput.vue>

 

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

<script>
export default {
    data(){
        return {
            newTodoItem: ''
        }
    },
    methods: {
        addTod(){
            //inputbox 빈값인지 체크, 빈값이 아니면 로직 수행
            if(this.newTodoItem !== ''){
                //inputbox에 입력된 텍스트의 앞, 뒤 공백문자열 제거
                var value = this.newTodoItem && this.newTodoItem.trim();
                //App컴포넌트로 이벤트 전달
                this.$emit('addTodoo', value);
                //inputbox 초기화
                this.clearInputbox();
            }
        },
        clearInputbox(){
            this.newTodoItem = '';
        }
    }
}
</script>

<style>
button{
    background: palegreen;
}
</style>

<TodoFooter.vue>

<template>
    <div>
        <button type="button" v-on:click="clearTodo">전체삭제</button>
        
    </div>
</template>

<script>
export default {
    methods: {
        clearTodo(){
            this.$emit('removeAll');
        }    
    }
}
</script>

<style scoped>
.clearAllContainer {
  width: 8.5rem;
  height: 50px;
  line-height: 50px;
  background-color: aqua;
  border-radius: 5px;
  margin: 0 auto;
}
.clearAllBtn {
  color: #2a9986;
  display: inline-block;
}
</style>

실행결과