Vue基础第四天之“本地存储、组件的自定义事件、全局事件总线、消息订阅与发布、nextTick、Vue封装的过度与动画”

本文链接：https://blog.csdn.net/wrk2466836002/article/details/123265420
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        一、webStorage浏览器的本地存储
		1.对象的存储与读取
        1>.sessionStorage.setItem('person',JSON.stringify(p))、
        2>.const result = JSON.parse(sessionStorage.getItem('person'))
        
        2. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

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

        4. 相关API：

            1>. ```xxxxxStorage.setItem('key', 'value');```
                                该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

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

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

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

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

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

                		该方法会清空存储中的所有数据。
        
        二、TodoList_本地存储（深度监听的使用）
        1.注意：可以在定义变量的时候进行空数组判断
        data() {
            return {
            todos: JSON.parse(localStorage.getItem("todos")) || [],
            };
        },
        2.注意：如果需要改变数据中的其他变量，可以开启深度监听
        watch: {
            todos:{
                deep: true, //开启深度监测
                handler(value){
                    localStorage.setItem("todos", JSON.stringify(value));
                },
            },
        
        三、组件的自定义事件
        1. 一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong>
        2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。
        3. 绑定自定义事件：
            1>. 第一种方式，在父组件中：```<Demo @atguigu="test"/>```  或 ```<Demo v-on:atguigu="test"/>```
            2>. 第二种方式，在父组件中：
                ```js
                <Demo ref="demo"/>
                ......
                mounted(){
                this.$refs.xxx.$on('atguigu',this.test)
                }
                ```
            3>. 若想让自定义事件只能触发一次，可以使用```once```修饰符，或```$once```方法。
        4. 触发自定义事件：```this.$emit('atguigu',数据)```		
        5. 解绑自定义事件```this.$off('atguigu')```
        6. 组件上也可以绑定原生DOM事件，需要使用```native```修饰符。
        7. 注意：通过```this.$refs.xxx.$on('atguigu',回调)```绑定自定义事件时，回调<span style="color:red">要么配置在methods中</span>，<span style="color:red">
            要么用箭头函数</span>，否则this指向会出问题！
            
        四、TodoList_自定义事件应用
        1.父组件 @checkAllTodo="checkAllTodo"或this.$refs.myheader.$on('atguigu',this.addTodo)
        2.子组件this.$emit('checkAllTodo',todoObj)

        五、 全局事件总线（GlobalEventBus）
        1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。
        2. 安装全局事件总线：
        ```js
        new Vue({
            ......
            beforeCreate() {
                Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
            },
            ......
        }) 
        ```
        3. 使用事件总线：
        1>. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<span style="color:red">回调留在A组件自身。</span>

            ```js
            methods(){
                demo(data){......}
            }
            ......
            mounted() {
                this.$bus.$on('xxxx',this.demo)
            }
            ```

        2>. 提供数据：```this.$bus.$emit('xxxx',数据)```

        4. 最好在beforeDestroy钩子中，用$off去解绑<span style="color:red">当前组件所用到的</span>事件。


        六、全局事件总线在TodoList应用
        1.注意：绑定和解绑要写在父组件中
        mounted() {
			this.$bus.$on('checkTodo',this.checkTodo) //绑定自定义事件
			this.$bus.$on('delTodo',this.delTodo) //绑定自定义事件
		},
        beforeDestroy() {
            this.$bus.$off('checkTodo')
            this.$bus.$off('delTodo')
        },
        2.使用： this.$bus.$emit('delTodo',id)

        七、消息订阅与发布
        1.需要数据的人要订阅消息
        消息订阅与发布（pubsub）

        2.一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。

        3. 使用步骤：

        1>. 安装pubsub：```npm i pubsub-js```

        2>. 引入: ```import pubsub from 'pubsub-js'```

        3>. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span>

            ```js
            methods(){
                demo(data){......}
            }
            ......
            mounted() {
                this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
            }
            ```

        4. 提供数据：```pubsub.publish('xxx',数据)```

        5. 最好在beforeDestroy钩子中，用```PubSub.unsubscribe(pid)```去<span style="color:red">取消订阅。</span>

        八、TodoList案例_pubsub（消息订阅）
        1.插件的位置摆放，要放最前面
        2.PubSub.unsubscribe(pid)删除的时候pid是像定时器一样的意思
        3.插件，子组件和父组件都要局部引用


        九、TodoList案例_编辑
        1.this.$refs.inputTitle.focus()获取焦点，注意获取的时候，因为inputDOM标签在执行这个代码的时候，还没有显示出来，所以加定时器，但是官网推荐这个$nextTick
        2.this.$bus.$emit('blurPrice',todo.id,e.target.value)推荐修改原数据，尽量在父文件中修改数据
        3.if(todo.hasOwnProperty('edit')){//完美解决-重复调用问题-判断我的身上有没有这样一个属性
        4.

        十、nextTick
        1. 语法：```this.$nextTick(回调函数)```
        2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
        3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。


        十一、Vue封装的过度与动画
        安装：
        npm install animate.css --save
        1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

        2. 图示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />

        3. 写法：

        1>. 准备好样式：

            - 元素进入的样式：
                1. v-enter：进入的起点
                2. v-enter-active：进入过程中
                3. v-enter-to：进入的终点
            - 元素离开的样式：
                1. v-leave：离开的起点
                2. v-leave-active：离开过程中
                3. v-leave-to：离开的终点

        2>. 使用```<transition>```包裹要过度的元素，并配置name属性：

            ```vue
            <transition name="hello">
                <h1 v-show="isShow">你好啊！</h1>
            </transition>
            ```

        3>. 备注：若有多个元素需要过度，则需要使用：```<transition-group>```，且每个元素都要指定```key```值。
                        

-->
    <div id="root">
       <p>{{name}}</p>
     

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue在启动时生成生产提示
      

        const vm = new Vue({
            el:'#root',
            data(){
               return{
                  name:"ss"
               }
            },
           
			
       
        })
    </script>
</body>
</html>