Vue - 미니프로젝트 Todo App 1

새로운 프로젝트를 만들고,

vue create todo

npm run serve하여, 띄워주기.

 

App.vue의 기본내용을 지우고 시작.

 

style은 부트스트랩을 사용할 예정

 

[ 부트스트랩 ]

https://getbootstrap.com/ > cdn (cdd only)복사 > public 폴더의 index.html에

title위에 붙여넣으면 끝

 

App.vue에 기본 todo모양만들기

class로 부트스트랩 style사용

//App.vue

<template>
<div id="app" class="container">
  <h1 class="text-center">Todo App</h1>
  <input type="text" class="w-100 p-2" placeholder="Type todo">
  <hr/>
  <div>
    <input type="checkbox">
    <span class="m-3">Buy a car</span>
  </div>
</div>
</template>

<script>


export default {

}
</script>

 

input에 글을 작성하면, check box부분이 추가되므로,

이부분을 컴포넌트로 만들어보자.

 

components폴더에 Todo.vue생성

//Todo.vue
<template>
  <div>
    <input type="checkbox">
    <span class="m-3">Buy a car</span>
  </div>
</template>
<script>

export  default {

}

</script>

App.vue에 import + 컴포넌트 등록 후 사용

 

App.vue에 data로 todos배열을 넣어보자.

//App.vue

script>
import Todo from '@/components/Todo';

export default {
  components : {
    Todo
  },
  data(){
    return {
      todos: [
        {id: 1, text :'buy a car', checked: false},
        {id: 2, text :'play game', checked: false},
      ]
    }
  }
}
</script>

이 data todos배열을 반복문으로 가져오기.

 

//App.vue 상단
<template>
  <div id="app" class="container">
    <h1 class="text-center">Todo App</h1>
    <input type="text" class="w-100 p-2" placeholder="Type todo">
    <hr/>
   <Todo v-for="todo in todos" :key="todo.id"/>
  </div>
</template>

이렇게 하면 buy a car만 두번나온다. todo.vue의 span부분이 하드코딩 되어있기때문

이 부분을 App.vue > Todo.vue로 props를 보내 해결해보자.

 

1. 받는쪽(Todo)에서 props 설정 

//todo.vue
<template>
  <div>
    <input type="checkbox">
    <span class="m-3">Buy a car</span>
  </div>
</template>
<script>

export  default {
 props:{
   todo:{
     type:Object,
     required : true,
   }
 }
}

</script>

 

2. App.vue에서 props보내주기

//App.vue
<template>
  <div id="app" class="container">
    <h1 class="text-center">Todo App</h1>
    <input type="text" class="w-100 p-2" placeholder="Type todo">
    <hr/>
   <Todo v-for="todo in todos" :key="todo.id" :todo="todo"/>
  </div>
</template>

3. Todo.vue에서 받아서 사용

기존하드코딩된부분을 중괄호 두개열고 변수적기

//todo.vue
<template>
  <div>
    <input type="checkbox" :checked="todo.checked">
    <span class="m-3">{{todo.text}}</span>
  </div>
</template>
<script>

 

 

자 이제 input에 이벤트도 넣어보자.

엔터를 누르면 작동하기위해 keyup.enter사용

//App.vue
    <input
        type="text"
        class="w-100 p-2"
        placeholder="Type todo"
        @keyup.enter="addToDo"
    >

엔터를 누르면, 입력한 todo가 추가되는 addToDo 메소드를 만들어 연결

입력한 값 = e.tartget.value가 text로 들어가고 추가로 id와 checked를 넣어준다.

methods: {
    addToDo(e) {
      this.todos.push({
        id: Math.random(),
        text: e.target.value,
        checked: false
      })
    }
  }

 

화면으로 돌아가 input창에 learn vue.js입력후 엔터를 치면

todo가 추가된다.

 

엔터를 쳐서 추가가되었다면, input비워주기 =>v-model사용

 

input에 v-model을 사용하여, 빈 스트링값을 가진 todoText와 연결

 

//App.vue
  methods: {
    todoText : "",
    addToDo(e) {
      this.todos.push({
        id: Math.random(),
        text: e.target.value,
        checked: false
      });
      this.todoText = '';  //추가 후 다시 초기화
    }
  }

 

 

참고강의 : https://opentutorials.org/course/4091/28138