Vue，组件-组件的创建方式2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="../js/vue.js"></script>
 9 </head>
10 <body>
11     
12     <div id="app"> 
13         <mycom2></mycom2>
14     </div>
15 
16 </body>
17 </html>
18 <script>
19 
20     // 注意： 不管哪种方式创建出来的组件， 组件的 template 属性指向的模板内容， 必须有且只有唯一的 一个根元素 
21     Vue.component('mycom2', {
22         template: '<div> <h3> 这是直接使用Vue.component 创建出来的组件 </h3> <span>132</span> </div>'
23     })
24 
25  var vm = new Vue({
26      el:'#app',
27      data:{
28 
29      },
30      methods: {
31          
32      }
33  })
34 </script>

Vue，组件-组件的创建方式2

Vue，组件-组件的创建方式2

效果图