[Vue2] vue 미니 프로젝트 ToDo App 1

1. 뷰 Cli로 프로젝트 생성

$ npm install -g @vue/cli
$ vue create todo

 

2. CSS를 bootstrap로 쓰기

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

public > index.html 파일에다 넣는다.

 

App.vue

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

<script>
import TodoComponent from '@/components/TodoComponent.vue';
export default {
  components: {
    TodoComponent
  },
  data() {
    return {
      // todo 배열
      todos: [ 
        {id:1, text:'buy a car',  checked:false },
        {id:2, text:'play game',  checked:false },
      ],
      todoText:'' // todoText값 빈 값
    }
  },
  methods: {
    addTodo (e) {
      this.todos.push({
        id: Math.random(), // id를 랜덤으로 돌림
        text: e.target.value, // text는 input의 값임
        checked : false // checked
      }); 
      this.todoText = ''; // input 값 비우기 
    }
  }
}
</script>

TodoComponent.vue

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

<script>
export default { 
    // props로 부모 컨테이너 값 가지고 옴.
    props: {
        todo: {
            type: Object, // type object
            required:true // 무조건 값이 필요
        }
    }
}
</script>

<style>

</style>

 

실행 화면

처음 실행 화면

list 추가 한 후

 

참고 자료

1. 코지코더 Vue.js 2 강좌

https://www.youtube.com/playlist?list=PLB7CpjPWqHOtYP7P_0Ls9XNed0NLvmkAh 

뷰js 2 (Vue.js 2) 기초 익히기 기본 강좌!