<template>

  <div id="app">

     <!-- header -->

     <Header/>

     <AddTodo v-on:handleAdd="handleAdd"/>

    <Todos :todos="todos" @handleDelete="handleDelete"/>

    </div>

</template>

<script>

import Todos from "./components/Todos";

import Header from "./components/layout/Header";

import AddTodo from "./components/layout/AddTodo";

export default {

  name:"app",

  data(){

    return{

      msg:"hello",

      todos:[

        {

          id:,

          title:"代办事项1",

          completed:false

        },

        {

          id:,

          title:"代办事项2",

          completed:false

        },

        {

          id:,

          title:"代办事项3",

          completed:false

        },

      ]

    }

  },

  components:{

    Todos,

    Header,

    AddTodo,

  },

  methods:{

    handleDelete(id){

      // console.log(id);

      this.todos=this.todos.filter(todo =>todo.id !==id)

    },

    handleAdd(newTodo){

      // this.todos.unshift(newTodo);

      this.todos=[...this.todos,newTodo]

    }

  }

}

</script>

<style>

*{

  box-sizing:border-box;

  margin: ;

  padding: ;

}

body{

  font-family: Arial, Helvetica, sans-serif;

  line-height: 1.4;

}

</style>

<template>

  <div>

    <div :key="todo.index" v-for="(todo) in todos">

      <!-- <Todoitem :todo="todo" @deleteItem="deleteItem"/> -->

      <Todoitem :todo="todo" @deleteItem="$emit('handleDelete',todo.id)"/>

    </div>

  </div>

</template>

<script>

import Todoitem from './Todoitem';

export default {

  name:"Todos",

  props:{

    todos:{

      type:Array

    }

  },

  components:{

    Todoitem

  },

  methods:{

    // deleteItem(id){

    //   console.log(id);

    // }

  }

};

</script>

<style scoped>

</style>

<template>

    <div class="todo-item" :class="{'is-complete':todo.completed}">

    <p>

      <input type="checkbox" @change="markComplete">

      {{todo.title}}

      <button class="del" @click="$emit('deleteItem',todo.id)">x</button>

    </p>

    </div>

</template>

<script>

export default {

    name:"Todos",

    props:["todo"],

    methods:{

      markComplete(){

        // console.log(this.todo);

        this.todo.completed = !this.todo.completed;

      }

    }

}

</script>

<style scoped>

.todo-item{

  background: #f4f4f4;

  padding: 10px;

  border-bottom: 1px #ccc dotted;

}

.is-complete{

  text-decoration: line-through;

}

.del{

  background: #ff0000;

  color: #fff;

  border: none;

  padding: 5px 9px;

  border-radius: %;

  cursor: pointer;

  float: right;

}

</style>

<template>

  <div>

    <form @submit="addTodo">

      <input v-model="title" type="text" name="title" placeholder="请添加代办事项……"/>

      <input type="submit" value="添加" class="btn">

    </form>

  </div>

</template>

<script>

import uuid from "uuid";

export default {

  name:"AddTodo",

  data(){

    return{

      title:""

    }

  },

  methods:{

    addTodo(e){

      e.preventDefault();

      // console.log('title:', this.title)

     const newTodo={

       id:uuid.v4(),

       title:this.title,

       completed:false

     };

     console.log('tag',newTodo )

     //注册事件

     this.$emit("handleAdd",newTodo)

     this.title="";

    }

  }

}

</script>

<style scoped>

form{

  display:flex;

}

input[type="text"]{

  flex:;

  padding: 5px;

}

input[type="submint"]{

  flex: ;

}

.btn{

  display: inline-block;

  border: none;

  background: #;

  color:#fff;

  padding:7px 20px;

  cursor: pointer;

}

.btn:hover{

  background: #;

}

</style>

<template>

  <header class="header">

      <h1>代办事项</h1>

  </header>

</template>

<script>

export default {

  name: 'Header',

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.header{

    background: #;

    color:#fff;

    text-align: center;

    padding:;

}

</style>