Vue.js 공부 기록(14) - 미니 프로젝트 Todo List App 만들기

📝뷰(Vue.js) 미니 프로젝트 Todo List App 만들기

 

1. 프로젝트 생성

vue create todo

 

2. 기본 디렉토리에 있는 HelloWorld 컴포넌트 지우고, index.html에 부트스트랩 CDN 추가

 <!-- 부트스트랩 추가 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

 

3. App.vue 코드 작성

<template>
  <div id="app" class="container">
    <h1 class="text-center">Todo App</h1>
    <input type="text" class="w-100 p-2" placeholder=">
    <hr>
  </div>
</template>

<script>
export default{
}
</script>

 

4. Todo.vue 컴포넌트 생성

 

5. App.vue에 Todo 컴포넌트 등록

import Todo from '@/components/Todo.vue';

export default {
  components:{
    Todo
  },

 

6. 더미 데이터 두 개를 넣어줌.

 data(){
    return {
      todoText: '',
      todos: [
        { id: 1, text: 'buy a car', checked: false},
        { id: 2, text: 'play game', checked: false},
      ]
    }
  },

 

📌리스트 추가 기능 구현

 

7. 엔터 이벤트 적용

 

8. 엔터를 치면 콘솔창에 잘 뜬다.

 

9. 엔터 치면 입력창 초기화되도록 코드 작성

 

10. 초기화가 잘 된다.

📌체크박스 기능 구현

 

11. 체크 이벤트를 올려 체크박스를 눌렀을 때 값을 업데이트 하도록 구현 필요함. -> @change 이벤트 추가

12. App.vue에 toggleCheckbox 추가, id 값을 찾아서 일치할 경우 업데이트 되도록함.

13. 체크될 경우 글자색 변경, 밑줄 생기도록 style 추가

 	<input type="checkbox" :checked="todo.checked"
	  	@change="toggleCheckbox">
	   </div>

	   {{todo.checked}}
      <span class="ml-3 flex-grow-1"
	  :class="todo.checked ? 'text-muted' : ''"
	  :style="todo.checked ? 'text-decoration:line-through' : ''">

 

14. 결과 확인

📌리스트 삭제 기능 구현

 

15. 삭제 버튼 추가

<button class="btn btn-danger btn-sm" @click="clickDelete">Delete</button>

 

16. 삭제 이벤트 추가

	clickDelete(){
			this.$emit('click-delete', this.todo.id);
		}

 

17. App.vue 수정

 

18. 삭제 기능 확인.