todolist案例
写案例的流程:
-
拆分组件,想清楚分多少部分(按照功能点拆分),每个部分控制的功能,实现静态组件
-
展示动态效果,考虑存放位置,使用情况:
- 一个组件用,放在自身
- 多个组件在用,放在他们共同的父组件身上(状态提升)
-
进行交互
-
点击勾选和取消勾选,两种实现方式:
-
给点击事件绑定处理函数并传id。@click=“handeleCheck(todo.id)”
-
也可以绑定change事件。@change=“handeleCheck(todo.id)”
<input type="checkbox" v-model="todo.done" />
这个方法虽然能改,但是违背了不改props接收数据的原则,只是因为这在对象里,监视不到
-
-
获取已完成数量+全选,同样两种实现方式:读取状态都是一样的
- 给input绑定事件处理函数,把每个勾选状态变成true或false
- 直接用完整版的计算属性。使用v-model,不需要自己再定义函数。
-
清除已完成:
采用父向子传值的方式,父组件通过过滤获得done属性不为true的,子组件直接调用
-
-
添加本地存储:把todolist的事件添加到本地存储上,刷新页面列表也不会重新初始化:
添加监视器,每当todos的项变化了就把新的添加到localstorage里
watch: {
todos: {
deep: true,
handler(*value*) {
localStorage.setItem('todos', JSON.stringify(*value*))
}
}
}
props 组件通信:
- 父传子:在组件里面通过标签属性v-bind:‘变量’,子组件需要props接收数据,
- 子传父:父先给子传一个自定义函数,子先在props里面接收,再this调用函数就可以传值了
本地存储 webStorage
存储大小一般为5M左右
localstorage 手动清除才会消失(API清除或清缓存)
- 添加数据:localStorage.setItem(‘key’,‘value’)