1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>组件定义</title>
6 <script src="../lib/js/vue.js"></script>
7 </head>
8 <body>
9 <div >
10 <!--第三步：将组件名称直接以标签的形式放在页面中即可
11 注意：定义组件时采用的驼峰命名法，这里改为 -加小写字母的形式，如果没采用驼峰命名法则直接引用即可-->
12 <my-com1></my-com1>
13 </div>
14 <script>
15 /**
16 * 使用Vue.extend 来创建全局的Vue 组件
17 */
18 //第一步：创建组件模板对象
19 const com1 = Vue.extend({
20 // 通过template 属性，指定了组件要展示的HTML结构
21 template:'<h3>使用Vue.extend 来创建全局的Vue 组件</h3>'
22 });
23 //第二步： 使用 Vue.component('组件的名称',创建出来的组件模板对象)
24 Vue.component('myCom1',com1);
25
26 // // 简写
27 // Vue.component('myCom1',Vue.extend({
28 // emplate:'<h3>使用Vue.extend 来创建全局的Vue 组件</h3>'
29 // }));
30
31 const vm = new Vue({
32 el:'#app',
33 data:{
34 },
35 methods:{
36 }
37 })
38 </script>
39 </body>
40 </html>
