使用Vue2 实现 TodoList（1）

前情提要：

        本来想等这个小样例对着网课写完了再去自己独立写一遍出来，结果笔者昨天因为Vscode错按了git的DIscard功能，导致components文件夹里面文件全部丢失，最后App.vue文件运行出来变成了初始的页面...

因此，出于这个原因，笔者想记录下自己独立完成的过程~

正文：

一：初始化TodoList

1、创建components所需文件夹

把这个小案例按如下图所示进行组件拆分：

 笔者的文件目录为下图所示。

2、将网课提供的模板进行拆分

根据网课所给index.css以及index.html文件进行拆分，笔者这里就不进行过多的描述了，详情请看这里：070_尚硅谷Vue技术_TodoList案例_静态_哔哩哔哩_bilibili

我们打开终端，输入：

npm run serve

运行完成后，呈现的静态初始化页面为下图所示：

3、注册各个组件并引入

        拿App.vue这个文件举例，我们应当注册"MyHeader"、"MyList"、"MyFooter"这三个组件，我们并没有把"MyItem"这个组件也注册是因为我把它放在了"MyList"这个组件里面，更加细化了管理组件。注册完组件后我们还应当引入，具体script标签内容如下：

<script>
import MyHeader from "./components/MyHeader";
import MyList from "./components/MyList";
import MyFooter from "./components/MyFooter";
export default {
  name: "App",
  data(){
    return{
      todos:[
        { id: "001", title: "吃饭", done: true },
        { id: "002", title: "睡觉", done: false },
        { id: "003", title: "打代码", done: true },
      ]
    }
  },
  components: { MyHeader, MyList, MyFooter },
};
</script>

所需要做的是，还要在别的组件根据所需进行components的注册以及引入，笔者在这里就不举例了，想了解详情还是点击此链接。

4、让列表里面数据更新为初始化

我们从上张图可以看到，我们已经给了一个todos的数组数据，我们现在要做的就是把这些数据在网页上呈现出来。

所以我应该想办法让"MyItem"读取到"MyList"的数据，传数据我们采用了props的方法，将todos的数据一级一级的传给自己的子组件。

先给出我最后的"MyList"的template标签内容：

<template>
  <ul class="todo-main">
    <MyItem v-for="todoObj in todos" :todo="todoObj" :key='todoObj.title'/>
  </ul>
</template>

 我使用了v-for去遍历todos的数据，然后将每一项todoObj传给"MyItem",这样”MyItem“就接收到了Todos里面的数据，因此"MyItem"里面template便签应如下所示：

<template>
  <li>
    <label>
      <input type="checkbox" />
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" style="display: none">删除</button>
  </li>
</template>

我们的页面此时应该如下图所示;

 

至此，页面初始化完毕，后面将继续讲解后续的功能实现。