zoukankan      html  css  js  c++  java
  • vue.2.0-自定义全局组件

    App.vue

    <template>
      <div id="app">
        <h3>welcome vue-loading</h3>
        <Loading></Loading>    <!--<Loading></Loading>是自定义组件--> 
    </div>
    </template>

    main.js

    import Vue from 'vue'
    import App from './App.vue'
    
    import Loading from './components/loading'  //定义Loading,components、loading是一个文件夹,loading里面必须要index.js
    
    Vue.use(Loading)    //use Loading
    
    new Vue({
        el: '#app',
        render: h => h(App)
    })

    index.js

    import LoadingComponent from './Loading.vue'
    
    const Loading = {     //定义Loading
        install: function(Vue) {//install是必须的
            Vue.component('Loading', LoadingComponent)//定义一个组件
        }
    };
    
    export default Loading

    Loading.vue

    <template>
        <div class="loading-box">
            {{msg}}
        </div>
    </template>
    <script>
        export default{
            data(){
                return {
                    msg:'Loading...^_^'
                }
            }
        }
    </script>
    <style scoped>
        .loading-box{
            color: red;
            font-size: 40px;
            font-family: 微软雅黑;
            text-shadow: 2px 2px 5px #000;
        }
    </style>
  • 相关阅读:
    canvas之碎碎念
    canvas之动态时钟
    属性小问题
    readonly and disabled
    table
    地图热区
    子块元素在父块元素中居中
    Ajax与JS
    前端测试
    html5/css3
  • 原文地址:https://www.cnblogs.com/yaowen/p/6994688.html
Copyright © 2011-2022 走看看