今天通过一个todolist的案例，兼顾了很多学过的知识点

todolist案例

写案例的流程：

1. 拆分组件，想清楚分多少部分（按照功能点拆分），每个部分控制的功能，实现静态组件

2. 展示动态效果，考虑存放位置，使用情况：

   1. 一个组件用，放在自身
   2. 多个组件在用，放在他们共同的父组件身上（状态提升）

3. 进行交互

   1. 点击勾选和取消勾选，两种实现方式：

      • 给点击事件绑定处理函数并传id。@click=“handeleCheck(todo.id)”

      • 也可以绑定change事件。@change=“handeleCheck(todo.id)”

        <input type="checkbox" v-model="todo.done" /> 这个方法虽然能改，但是违背了不改props接收数据的原则，只是因为这在对象里，监视不到

   2. 获取已完成数量+全选，同样两种实现方式：读取状态都是一样的

      • 给input绑定事件处理函数，把每个勾选状态变成true或false
      • 直接用完整版的计算属性。使用v-model，不需要自己再定义函数。

   3. 清除已完成：

      采用父向子传值的方式，父组件通过过滤获得done属性不为true的，子组件直接调用

4. 添加本地存储：把todolist的事件添加到本地存储上，刷新页面列表也不会重新初始化：

   添加监视器，每当todos的项变化了就把新的添加到localstorage里

   watch: {

   ​ todos: {

   ​ deep: true,

   ​ handler(*value*) {

   ​ localStorage.setItem('todos', JSON.stringify(*value*))

   ​ }

   ​ }

   }

props 组件通信：

1. 父传子：在组件里面通过标签属性v-bind:‘变量’，子组件需要props接收数据，
2. 子传父：父先给子传一个自定义函数，子先在props里面接收，再this调用函数就可以传值了

本地存储 webStorage

存储大小一般为5M左右

localstorage 手动清除才会消失（API清除或清缓存）

1. 添加数据：localStorage.setItem（‘key’,‘value’)