Vue，组件-组件的创建方式1.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 </head>
 9 <script src="../js/vue.js"></script>
10 <body>
11     <div id="app">
12         <!--  如果要使用组件， 直接， 把组件的名称， 以 HTML 标签的形式， 引入页面中， 即可 -->
13         <!--  注意： 定义组件的时候 用的是驼峰命名法， 引入页面时， 大写的字母需要变成小写， 前面加-  -->
14         <my-com1></my-com1>
15     </div>
16 </body>
17 </html>
18 <script>
19 
20     // 1.1 使用 Vue.extend 来创建全局的Vue组件
21     // var com1 = Vue.extend({
22     //     template:'<h3>这是使用Vue.extend 创建的组件</h3>' // 通过template属性， 指定了组件要展示的HTML结构
23     // })
24 
25     // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
26     //    Vue.component('myCom1', com1)
27     //    如果使用 Vue.component 定义全局组件的时候， 组件使用了 驼峰命名， 则在引用组件的时候， 需要把 大写的驼峰改成小写的字母，
28     //  同时， 两个单词之前， 使用 - 连接 
29     //    如果不使用驼峰命名， 则直接拿 命名名称 使用即可
30 
31     // Vue.component('myCom1', com1)
32     
33 
34     // Vue.component 第一个参数： 组件的名称， 将来在引用组件的时候， 就是一个 标签形式 来引入 它的
35     // 第二个参数： Vue.extend 创建的组件， 其中 template 就是组件将来要展示的HTML内容
36     Vue.component('myCom1', Vue.extend({
37         template:'<h3>这是使用Vue.extend 创建的组件</h3>' // 通过template属性， 指定了组件要展示的HTML结构
38     }))
39     
40     
41     var vm =  new Vue({
42         el:'#app',
43         data:{
44 
45         },
46         methods: {
47             
48         }
49     })
50 </script>
Vue，组件-组件的创建方式1.2

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

效果图
