Vue从入门到精通——第三章 使用 Vue 脚手架（下）

1.浏览器本地存储

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

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

3. 相关API：

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

   • xxxxxStorage.getItem('person');

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

   • xxxxxStorage.removeItem('key');

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

   • xxxxxStorage.clear()

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

4. 备注：

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

2.TodoList本地存储

1. 在Vue实例中添加监视函数

watch: {
			todos:{
				deep:true,//开深度监视，监视done属性
				handler(value){
					//将tods中的value值存放到本地，JSON.stringify(value)将字符串格式转换为对象格式
			localStorage.setItem('todos',JSON.stringify(value))
		}
	}
}

2.在data()中添加代码，读取本地存储内容

data() {
	return {
		//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）
		todos:JSON.parse(localStorage.getItem('todos')) || []//[]防止本地存储为空时报错
	}
}

3.组件自定义事件

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3. 绑定自定义事件：

   1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

   2. 第二种方式，在父组件中：

      <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',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

4.全局事件总线

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 安装全局事件总线：（在main.js中安装）

   new Vue({
   	......
   	beforeCreate() {
   		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
   	},
       ......
   }) 
   

3. 使用事件总线：

   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

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

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

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

5.消息订阅与发布（pubsub）

1. 一种组件间通信的方式，适用于任意组件间通信。

2. 使用步骤：

   1. 安装pubsub：npm i pubsub-js

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

   3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

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

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

   5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

6.nextTick

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

7.Vue封装的过度与动画

1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

2. 图示：
   

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属性：

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

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

   4. 第三方库
      进入https://www.npmjs.com/
      搜索 Animate.css
      
      使用步骤：

      • 安装：$ npm install animate.css --save
      • 引入：import ‘animate.css’;
      • 配置：将animate__animated animate__bounce写入动画标签的name中
      • 选择动画：以下语句写到动画语句中
        enter-active-class=“进入动画名”
        leave-active-class=“进入动画名”