Vue脚手架二

1、scoped样式

作用：让样式在局部生效，防止冲突
写法：<style scoped>...</style>

2、浏览器本地存储webStorage——localStorage和sessionStorage

存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制
相关API
xxxxxStorage.setItem('key', 'value')
xxxxxStorage.getItem('person')
xxxxxStorage.removeItem('key')
xxxxxStorage.clear()
备注——
SessionStorage存储的内容会随浏览器窗口关闭而消失
LocalStorage存储的内容，需手动清除才会消失
xxxxxStorage.getItem(xxx)：如果xxx对应的value获取不到，那么getItem的返回值是null
JSON.parse(null)的结果依然是null

3、组件的自定义事件

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

4、全局事件总线(GlobalEventBus)

一种组件间通信的方式，适用于任意组件间通信
安装全局事件总线与使用
最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

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

一种组件间通信的方式，适用于任意组件间通信
使用步骤
　　1、安装pubsub：npm i pubsub-js
　　2、引入: import pubsub from 'pubsub-js'
　　3、接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
　　4、提供数据：pubsub.publish('xxx',数据)
　　5、最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅

6、Vue封装的过度与动画

作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名
写法
准备好样式
元素进入的样式：
v-enter：进入的起点
v-enter-active：进入过程中
v-enter-to：进入的终点
元素离开的样式：
v-leave：离开的起点
v-leave-active：离开过程中
v-leave-to：离开的终点
使用<transition>包裹要过度的元素，并配置name属性
<transition name="hello">
<h1 v-show="isShow">你好啊！</h1>
</transition>
若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。