Vue 事件总线 - Vue | Nico Niconi = Nekoaimer = 清心如水，清水即心

# webStorage

存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
相关 API：
1. xxxxxStorage.setItem('key', 'value');
  该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
2. xxxxxStorage.getItem('person');
  
  该方法接受一个键名作为参数，返回键名对应的值。
3. xxxxxStorage.removeItem('key');
  
  该方法接受一个键名作为参数，并把该键名从存储中删除。
4. xxxxxStorage.clear()
  
  该方法会清空存储中的所有数据。
备注：
1. SessionStorage 存储的内容会随着浏览器窗口关闭而消失。
2. LocalStorage 存储的内容，需要手动清除才会消失。
3. xxxxxStorage.getItem(xxx) 如果 xxx 对应的 value 获取不到，那么 getItem 的返回值是 null。
4. JSON.parse(null) 的结果依然是 null。

一种组件间通信的方式，适用于： 子组件 ===> 父组件
使用场景：A 是父组件，B 是子组件，B 想给 A 传数据，那么就要在 A 中给 B 绑定自定义事件（ 事件的回调在 A 中 ）。
绑定自定义事件：
1. 第一种方式，在父组件中： <Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
2. 第二种方式，在父组件中：
 <Demo ref="demo"/>
 ......
 mounted(){
 this.$refs.xxx.$on('atguigu',this.test)
 }
3. 若想让自定义事件只能触发一次，可以使用 once 修饰符，或 $once 方法。
触发自定义事件： this.$emit('atguigu',数据)
解绑自定义事件 this.$off('atguigu')
组件上也可以绑定原生 DOM 事件，需要使用 native 修饰符。
注意：通过 this.$refs.xxx.$on('atguigu',回调) 绑定自定义事件时，回调 要么配置在 methods 中 ， 要么用箭头函数 ，否则 this 指向会出问题！

安装全局事件总线：

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

作用：在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名。
图示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />
写法：
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 值。

在 vue.config.js 中添加如下配置：

说明：

编写 vue.config.js 配置具体代理规则：

	module.exports = {
	devServer: {
	proxy: {
	'/api1': {// 匹配所有以 '/api1' 开头的请求路径
	target: 'http://localhost:5000',// 代理目标的基础路径
	changeOrigin: true,
	pathRewrite: {'^/api1': ''}
	},
	'/api2': {// 匹配所有以 '/api2' 开头的请求路径
	target: 'http://localhost:5001',// 代理目标的基础路径
	changeOrigin: true,
	pathRewrite: {'^/api2': ''}
	}
	}
	}
	}
	/*
	changeOrigin 设置为 true 时，服务器收到的请求头中的 host 为：localhost:5000
	changeOrigin 设置为 false 时，服务器收到的请求头中的 host 为：localhost:8080
	changeOrigin 默认值为 true
	*/

说明：

Vue

	<Demo ref="demo"/>
	......
	mounted(){
	this.$refs.xxx.$on('atguigu',this.test)
	}