Vue-- create component -template --- the definition of private assembly

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head> 

< Body > 
  < 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 use Vue.component define 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 do not use hump, the name used to take direct; 
    // Vue.component ( 'mycom1', com1) 

    // Vue.component first argument: the name of the component in the future when referring to the component is in the form of a label it introduced 
    // 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> What is the use of Vue.extend assembly created </ H3> ' 
    })) 


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

</html>

 
  <div id="app"> 
 
 
      <! - or the use of tags in the form of the introduction of own components -> 
 
 
      <mycom2></mycom2> 
 
 
    </div> 
 

 
    <script> 
 
 
      // Note: whether to create a template out of the property which way the components, assemblies points of template content, you must have only one root element and only 
 
 
      View . component ( 'mycom2' , { 
 
 
        Template:  '<div> <H3> which is created out of the assembly directly Vue.component </ h3> <span> 123 </ span> </ div>' 
 
 
      }) 
 

 
      // Create Vue instance, get ViewModel 
 
 
      var vm = new Vue ({     
 
 
        on:  '#app' , 
 
 
        data: {}, 
 
 
        methods: {} 
 
 
      }); 
 
 
    </script> 
 
 
  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <mycom3></mycom3>
    <!-- <login></login> -->
  </div>


  <div id="app2">
    <mycom3></mycom3>
    <login></login>
  </div>

  <!-- 在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构  -->
  <template id="tmpl">
    <div>
      <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
      <h4>好用,不错!</h4>
    </div>
  </template>

  <template id="tmpl2">
    <h1>这是私有的 login 组件</h1>
  </template>

  <script>
    Vue.component('mycom3', {
      template: '#tmpl'
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {}
    });


    var vm2 = new Vue({
      el: '#app2',
      data: {},
      methods: {},
      filters: {},
      directives: {},
      components: { // 定义实例内部私有组件的
        login: {
          template: '#tmpl2'
        }
      },

      beforeCreate() { },
      created() { },
      beforeMount() { },
      mounted() { },
      beforeUpdate() { },
      updated() { },
      beforeDestroy() { },
      destroyed() { }
    })
  </script>
</body>

</html> 
 
 

Vue-- create component -template --- the definition of private assembly

Guess you like