Vue three ways to create components

1, Vue.extend to create a global assembly of Vue

< Div the above mentioned id = "App" > 
    <-! If you want to use components directly, the name of the component, in the form of HTML tags, into the page, you can -> 
    < mycom1 > </ mycom1 > 
  </ div > 

  < Script > 
    // 1.1 Vue.extend used to create the overall assembly Vue 
    // var = COM1 Vue.extend ({ 
    //    Template: '<H3> which is created using components Vue.extend </ h3>' / / template through attribute that specifies the components to show the structure of an HTML 
    // }) 
    // 1.2 Vue.component ( 'component name', created out of the assembly template object) 
    // Vue.component ( 'myCom1', COM1) 
    // If you are using Vue.component define a global component when the component name used camelCase, then when referring to components, the need to hump uppercase to lowercase letters, at the same time, before two words, use - Links; 
    //If you do not use the hump, the name directly to get used to; 
    // Vue.component ( 'mycom1', com1) 

    // Vue.component first argument: the name of the component in the future when referring to components, is a label We are introduced in the form of its 
    // second argument: component Vue.extend created, wherein the template is a component to display HTML content in the future 
    Vue.component ( ' mycom1 ' , Vue.extend ({ 
      template: ' <H3> this is Vue.extend created using components </ H3> ' 
    })) 


    // Create Vue instance, to give the ViewModel 
    var VM =  new new Vue ({ 
      EL: ' #app ' , 
      Data: {}, 
      Methods: {} 
    }); 
  < / Script >

2, the direct use Vue.component create

  < Div the above mentioned id = "App" > 
    <-! Or use the label form, introducing its own components -> 
    < mycom2 > </ mycom2 > 
  </ div > 

  < Script > 
    // Note: No matter which way out is to create template attribute points to the template content components, assemblies, there must be one and only one unique root element 
    Vue.component ( ' mycom2 ' , { 
      template: ' <div> <h3> this is used directly created out of Vue.component component </ H3> <span> 123 </ span> </ div> ' 
    }) 

    // Create Vue instance, to give the ViewModel 
    var VM =  new new Vue ({ 
      EL:'#app',
      data: {},
      methods: {}
    });
  </script>

3, outside #app controlled using template element, an HTML template structure defining component 

< Div the above mentioned id = "App" > 
    < mycom3 > </ mycom3 > 
    <-! <The Login> </ the Login> -> 
  </ div > 


  < div the above mentioned id = "app2" > 
    < mycom3 > </ mycom3 > 
    < the Login > </ Login > 
  </ div > 

  <-! outside #app controlled using template element, an HTML template structure defining component   -> 
  < template ID = "tmpl" > 
    < div > 
      <h1 >This is done by template elements outside the defined component structure, this way, there are only hints and highlighted code </ h1 > 
      < h4 > easy to use, good! </ H4 > 
    </ div > 
  </ template > 

  < Template ID = "tmpl2" > 
    < h1 of > this is private login component </ h1 of > 
  </ Template > 

  < Script > 
    Vue.component ( ' mycom3 ' , { 
      Template: ' #tmpl '
    }) 

    // Create Vue instance, to give the ViewModel 
    varVM =  new new Vue ({ 
      EL: ' #app ' , 
      Data: {}, 
      Methods: {} 
    }); 


    var VM2 =  new new Vue ({ 
      EL: ' # App2 ' , 
      Data: {}, 
      Methods: {}, 
      Filters : {}, 
      directives: {}, 
      components: { // definition of the example of the internal components of private 
        Login: { 
          Template: ' # tmpl2 ' 
        } 
      }, 
    }) 
  </ Script >