Vue插件语法，及案例总结

一.插件

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：

    ```js

    对象.install = function (Vue, options) {

        // 1. 添加全局过滤器

        Vue.filter(....)

   

        // 2. 添加全局指令

        Vue.directive(....)

   

        // 3. 配置全局混入(合)

        Vue.mixin(....)

   

        // 4. 添加实例方法

        Vue.prototype.$myMethod = function () {...}

        Vue.prototype.$myProperty = xxxx

    }

    ```

4. 使用插件：```Vue.use()```

二.todolist案例总结: 

1. 组件化编码流程：

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

    ​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

    ​       1).一个组件在用：放在组件自身即可。

    ​       2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。

    ​ (3).实现交互：从绑定事件开始。

2. props适用于：

    ​ (1).父组件 ==> 子组件 通信

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

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

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

三.利用浏览器本地存储数据

 webStorage

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

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

3. 相关API：

    1. ```xxxxxStorage.setItem('key', 'value');```

                  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. ```xxxxxStorage.getItem('person');```

        ​      该方法接受一个键名作为参数，返回键名对应的值。

    3. ```xxxxxStorage.removeItem('key');```

        ​      该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. ``` xxxxxStorage.clear()```

        ​      该方法会清空存储中的所有数据。

4. 备注：

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

    2. LocalStorage存储的内容，需要手动清除才会消失。

    3. ```xxxxxStorage.getItem(xxx)```如果xxx对应的value获取不到，那么getItem的返回值是null。

    4. ```JSON.parse(null)```的结果依然是null。

    5.JSON.stringify(Object) 可以将 对象Object转化为字符串类型

      JSON.parse(str) 解析字符串