加载过慢请开启缓存(浏览器默认开启)
1.全局事件总线是一种组件间通信的方式，适用于任意组件间通信
2.安装全局事件总线：
new Vue({
beforeCreate(){
Vue.prototype.$bus=this//安装全局事件总线，$bus就是当前应用的vm
}
})
3.使用事件总线：
1.接受数据：A组件想要接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
methods(){
demo(data){}
},
mounted(){
this.$bus.$on('xxx',this.demo)
}
2.提供数据：
this.$bus.$emit('xxx',数据)
4.最好在beforeDestory钩子中，用$off去解绑当前组件所用到的事件
1.使用场景：A是父组件，B是子组件，子组件B想给父组件A传数据，那么就需要在父组件A中给子组件B绑定自定义事件（事件的回调在父组件A中）
2.绑定自定义事件：
1.第一种方式：在父组件中
<Demo @peiqi="test"/>或<Demo v-on:peiqi="test"/>
子组件中触发自定义事件
this.$emit('peiqi',数据)
2.第二种方式：在父组件中
<Demo ref="demo" />
mounted(){
this.$refs.demo.$on('peiqi',this.test)
}
3.如果想要自定义事件只触发一次，可以使用once修饰符，或者$once方法
4.解绑自定义事件：this.$off(‘peiqi’)
5.组件上也可以绑定原生DOM事件，需要使用native修饰符
通过this.$refs.xxx.$on('peiqi',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则会出现this指向问题
1.存储内容一般支持5MB左右（不同浏览器可能不同）
2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
3.相关API：
4.备注：
1.SessionStorage存储的内容会随着浏览器的窗口关闭而消失
2.LocalStorage存储的内容需要手动清楚才会消失
3.xxxxstorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null
4.JSON.parse(null)的结果依然是null
功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义：在main.js同级目录下定义一个插件文件plugins.js
export default{
install(Vue，options){
//使用全局过滤器
Vue.filter(){}
//定义全局指令
Vue.directive('',{})
//定义全局混入
Vue.mixin({})
//给vue原型上添加一个方法
Vue.prototype.方法名=()=>{}
}
}
引入：在main.js中引入，需要在new Vue实例前引入
import Plugins from 'xxxx'
使用：
Vue.use(plugins)
mixin(混入)：
功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合：在main.js同级目录下定义一个mixin.js文件，然后定义混合的数据或方法
组件中的data,methods,mounted,computed等都可以在这里配置，data,methods这些，如果组件中定义了，混入的不再使用，使用组件自己的，但是生命周期钩子函数，组件和混入的都会使用
export const mixin ={
data(){
return{
}
},
methods:{},
mounted(){}
}
export const mixin2={}
第二步使用混入:
import {mixin,mixin2}form 'xxx'
export default{
data(){},
mixins:[mixin，mixin2]
}
全局混入：
在main.js中设置，然后所有组件均可以使用混入的方法、数据等
import {mixin,mixin2}form 'xxx'
Vue.mixin(mixin)
Vue.mixin(mixin2)
功能：让组件接收外部传过来的数据
（1）传递数据（父组件）：
<Demo name="xxx"/> 或 <Demo :age="xxx"/>
直接传是字符串，如name,通过绑定传递的是js表达式，如果绑定了变量，需要再data中声明
(2) 接收数据（子组件）：
第一种（只接收）：props:['name','age']
第二种（限制类型）：
props:{
name:String，
age:Number
}
第三种（限制类型、限制必要性、指定默认值）： 通常required和default不会同时出现
props:{
name:{
type:String,//类型
required:true//是否必须传值
},
age:{
type:Number,
default:18 //父组件未传值时使用，指定默认值
}
}
注意:通过props接收的变量是只读的，不可以直接修改，如果进行了修改，就会发出警告
如果确实需要修改，那么请复制props中的内容到data中一份，然后修改data中的数据
data(){
return{
myage:this.age//props中的变量先出现，data中后出现，可在这里使用props中的数据进行复制
}，
methods:{
updateage(){
this.myage++//修改时修改data中的数据
}
}
}
ref属性
1.被用来给元素或子组件注册引用信息（id的替代者）
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3.使用方式：
打标识：<div ref="xxx">……</div>或组件标签：<School ref="xxx"></School>
获取：this.$refs.xxx
关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别：
vue.js是完整版的vue,包含：核心功能+模板解析器
vue.runtime.xxx.js是运行版vue，只包含核心功能，没有模板解析器
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到
createElement函数去指定具体内容
render: createElement=> createElement('标签名'，'标签体内容')或写为
render:h=>h(App)
突然发现一个echarts警告：
There is a chart instance already initialized on the dom.
这个问题的出现在于，在一张表上渲染不同数据，其实dom已经存在了，但是我们在每次数据发生改变的时间都重新进行了一次渲染，导致出现警告
解决方法：初始化时判断echarts是否存在，如果存在将其销毁，然后重新渲染
vue中：
data() {
return {
myChart: null,
}
},
drawChart() {
//判断是否存在 != 是不等于
if (
this.myChart != null &&
this.myChart != '' &&
this.myChart != undefined
) {
this.myChart.dispose()
}
var chartDom = document.getElementById('main')
this.myChart = echarts.init(chartDom)
var option
option = {
}
option && this.myChart.setOption(option)
//echarts自适应屏幕大小
window.addEventListener('resize', () => {
this.myChart.resize()
})
},
react中：
import * as echarts from 'echarts/lib/echarts.js'
import china from '../../utils/china.json'
function Home(props) {
//在方法最外层定义全局变量
var myChart;
const mapOption = (mapName, data, mapdata) => {
//判断是否存在 !== 是不等于
if (myChart !== null && myChart !== "" && myChart !== undefined) {
myChart.dispose();
}
myChart = echarts.init(document.querySelector('.map'));
echarts.registerMap('china', { geoJSON: china })
var option = {}
myChart.setOption(option);
}
return (
<div div className='page-home' >
<div className='map'></div>
</div >
)
}
Vue使用组件的三大步骤：
1.定义组件（创建组件）
2.注册组件
3.使用组件（组件标签）
如何定义一个组件：
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别，如下：
1.el不可以写，因为所有的组件最终都要经过一个vm的管理，由vm中的el决定服务于哪个组件
2.data必须写成函数，因为组件被复用时，数据存在引用关系
3.使用template可以配置组件结构
如何注册组件：
1.局部注册：靠new Vue的时候传入component选项
2.全局注册：靠Vue.component(‘组件名’，组件)
编写组件标签：使用组件
组件名规则：
1.一个单词组成：
首字母小写：school
首字母大写：School
2.多个单词组成：
kebab-case命名：my-school
CamelCase命名：MySchool(需要脚手架支持)
备注：
1.组件名尽可能回避HTML中已有的元素，例如h2,H2都不行
2.可以使用name配置项指定组件在开发者工具中的名称
关于组件标签：
第一种写法：
<school></school>
第二种写法:
<school/>
简写方式：
const school=Vue.extend(options)可简写为 : const school=options
关于VueComponent:
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.我们只需要写
3.特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent
4.关于this指向：
1.组件配置中：data函数，methods中的函数，watch中的函数，computed中的函数，它们的this均是【VueComponent实例对象】
2.new Vue(options)配置中：data函数，methods中的函数，watch中的函数，computed中的函数，它们的this均是【Vue实例对象】
5.VueComponent实例对象：也可以称之为组件实例对象，可用vc简称,Vue实例对象，可简称为vm
内置关系：
VueComponent.prototype__proto__=Vue.prototype
作用：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。
