vue创建组件的三种方式记录

1.vue.extend 创建全局的vue组件

const example = Vue.extend({
    template:'<h1>这是使用 Vue.extend创建组件</h1>'
});
Vue.component("myCom1",example );  //('组件名称'，创建出来的组件模板对象)

//可以简写为
Vue.component("myCom1",Vue.extend({
    template:'<h1>这是使用 Vue.extend创建组件</h1>'
})
 )

第一种方式展示的组件

<!-- 第一种方式展示组件 -->
   <my-com1></my-com1>   <!--不以大小驼峰方命名，而是用-和小写名称展示-->

2.vue.component 创建全局的vue组件

Vue.component("myCom2",{
//注意：无论用那种方式创建组件，组件的template属性指向的模板内容，必须有且只有唯一的一个根元素
    template:'<div><h1>这是使用 Vue.conponent创建组件</h1><span>你好</span></div>'
})
//该方式不可以快捷键html中的模板

<!-- 第二种方式展示组件 -->
   <my-com2></my-com2>  

3.vue.component 创建组件,外部定义template

<!-- 第三种方式创建组件的模板 -->
<template id='example'>
    <div>
        <h1>
            {{msg}}
        </h1>
    </div>
</template>


<script>

Vue.component('com3',{
//注意：无论用那种方式创建组件，组件的template属性指向的模板内容，必须有且只有唯一的一个根元素
    template:'#example',
    data:function() {
        return {msg:'这是第三种方式创建组件,并且该方式有代码快捷键的提示'}
    }
})
</script>

<!-- 第三种方式展示组件 -->
   <my-com3></my-com3>