vue项目todolist

初始化项目

（1）先把vue项目创建出来

（2）然后把src中的文件替换掉，替换成我们项目的文件

（3）创建3个组件，头部组件（TodoHeader），身体组件（TodoMain），结尾组件（TodoFooter）

（4）把样式导入App.vue中去

（5）把数据列表传入进去

TodoMain获取父组件数据，进行传值

父组件使用自定义属性，动态把list数组传递给子组件

子组件使用props进行接收，然后使用v-for对页面进行渲染

App.vue使用自定义属性，传递参数

<TodoMain :list="list"></TodoMain>  //父传子

TodoMain使用props进行接收，然后使用v-for对页面进行渲染

//子组件对父组件进行接收 
 props : {
    list : {
      type : Array,
      required : true
    }
  }
//子组件使用v-for对页面进行渲染
      <!-- 当任务已完成，可以给 li 加上 completed 类，会让元素加上删除线 -->
      <li :class="{completed : item.isDone}" v-for="(item,index) in list" :key="item.id" >
        <div class="view">
          <input class="toggle" type="checkbox" v-model="item.isDone"/>
          <label>{{ item.name }}</label>
          <button class="destroy"></button>
        </div>
      </li>

删除功能

子组件不能直接对父组件传过来的数据进行修改，所以子组件需要把方法传递给父组件，父组件完成删除操作

 TodoMain组件创建事件，并且暴漏给父组件

<button class="destroy" @click="del(item.id)"></button>
//子组件创建事件，暴漏给父组件
  methods : {
    del (id) {
      // console.log(id)
      this.$emit(`del`,id)
    }
  }

父组件进行接收，并且为子组件提供一个方法

    <TodoMain :list="list" @del="fuDel"></TodoMain> //父组件接收子组件的传值
//父组件为子组件创建一个方法
  methods : {
    fuDel (id) {
     this.list = this.list.filter(i => { return i.id !== id })
    }
  }