学习day53

今天主要是做一个案例

TodoList

组件化编码流程：

    1. 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突

    2.实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
            1.一个组件在用：放在组件自身即可
            2.一些组件在用：放在他们共同的父组件上（状态提升）

    3.实现交互：从绑定事件开始

props适用于：

  1.父组件 ==> 子组件 通信
  2.子组件 ==> 父组件 通信（要求父组件先给子组件一个函数）

使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的

props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做
 

主要是组件之间的交互

APP.vue

MyHeader.vue

MyList.vue

MyItem.vue

MyFooter.vue

本地存储

1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制

3.相关API：

        1.xxxStorage.setItem('key', 'value')：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
         2.xxxStorage.getItem('key')：该方法接受一个键名作为参数，返回键名对应的值
         3.xxxStorage.removeItem('key')：该方法接受一个键名作为参数，并把该键名从存储中删除
         4.xxxStorage.clear()：该方法会清空存储中的所有数据
4.备注：

        1.SessionStorage存储的内容会随着浏览器窗口关闭而消失
        2.LocalStorage存储的内容，需要手动清除才会消失
        3.xxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到，那么getItem()的返回值是null
        4.JSON.parse(null)的结果依然是null
 

localStorage.html

    
    


    
localStorage
    点我保存一个数据
    点我读取一个数据
    点我删除一个数据
    点我清空一个数据
    
    
    

sessionStorage.html

    
    


    
sessionStorage
    点我保存一个数据
    点我读取一个数据
    点我删除一个数据
    点我清空一个数据
    
    
    

TodoList 本地存储

在上面案例中进行一个优化，使其添加一个本地存储的功能