vue 缓冲组件

本案例摘自 无线联网监控平台 vue框架

思路是： 首先建立一个Loading。vue 页面。 注册为全局组件 然后 需要的页面 直接标签引入 ，使用v-if -‘true’ 控制

注意点 Loading页面的缓冲 转圈圆环是一个gif动图。

loading页面

<template>
        <div class="loading">
                <span><img src="static/images/loading.gif"/>数据加载中，请稍后...</span>
        </div>
</template>
<script>
</script>
<style>
</style>

loading页面的js

import MyLoading from './Loading.vue'
// 这里是重点
const Loading = {
    install: function(Vue){
        Vue.component('Loading',MyLoading)
    }
}
// 导出组件
export default Loading

main.js中引入 并使用

// 引入自定义组件。index.js是组件的默认入口
import Loading from './components/loading';          //这里引入引入了index.js   如果文件中有多个文件，默认index.js
Vue.use(Loading);

注意： 本案例 补充知识点：

es6的模块引入和导出
Vue.use(Loading); 做了什么？ 见vue视频笔记