Vue component development

The page is divided into several components, which simplifies page development, facilitates maintenance and reuses components.

 

Type of component

  • General components, such as forms, pop ups, menu bars, paging components, etc
  • Business component, which implements a business, such as lottery component
  • Page component, also known as single page, a page is a component, only to complete functions, not reuse

 

Component development process: declaration, registration and use

 

 

demo component usage process

   <div id="app"></div>
    
    
    <script>

        var myHeader={  //Declare a component
            template:'<div>this is the header area</div>'
        }
        
        var myBody={
            template:'<div>this is the body area</div>'
        }
        
        var myFooter={
            template:'<div>this is the footer area</div>'
        }
        
        new Vue({
            el:'#app',
            components:{  //Registration component
                myHeader,
                myBody,
                myFooter
            },
            template:'<div><myHeader></myHeader><myBody></myBody><myFooter></myFooter></div>' //Use components
        });
        
    </script>

A declaration is a global declaration, but it needs to be registered in every Vue object used.

 

 

There are two ways to use components

  • < myheader > < / myheader > takes variable name as label name directly
  • < my header > < my header > Convert words to all lowercase, - connect

 

 

Syntax sugar is used to declare components

    // The original way of writing
    var myHeader=Vue.extend({
        template:'<div>this is the header area</div>'
    })
    
    // Grammatical sugar
    var myHeader={ 
        template:'<div>this is the header area</div>'
    }

The effect is the same, but it is easier to use grammar sugar

 

 

 

Another way of component declaration and registration

  // statement+Register a component
    Vue.component('MyHeader',{
        template:'<div>this is the header area</div>'
    })
    
    Vue.component('MyBody',{
        template:'<div>this is the body area</div>'
    })
    
    Vue.component('MyFooter',{
        template:'<div>this is the footer area</div>'
    })
        
    new Vue({
        el:'#app',
        template:'<div><my-header></my-header><my-body></my-body><my-footer></my-footer></div>' //Use components
    });

Declaration and registration are global and can be used directly in Vue objects

Tags: Javascript Vue

Posted on Thu, 02 Apr 2020 17:06:25 -0700 by vince81