vue创建组件的方式

一、直接通过Vue.extend的方式创建组件

 // 通过vue.extend 来创建全局组件
    var com1 = Vue.extend({
        template:'<h3>这是h3组件</h3>>'
    })
    // 通过Vue.component("组件名称"，"Vue.extend创建出来的模板对象")
    Vue.component("mycom",com1)

在new Vue()对象中引用mycom组件对象

  <div id="app">
        <div>
　　　　　　<mycom></mycom>
        </div>
  </div>

二、直接通过Vue.component来创建组件

1、在body中定义html模板

<template id="temp1">
        <div>
            <h2>temp1</h2>
            <h2>temp1</h2>
        </div>
</template>

2、在js中定义Vue.component的，template为body中定义html模板的id，也可以直接在template参数中直接写入html

Vue.component("mycont",{
        template:"#temp1"
   })

3、在new Vue()对象中引用m定义组件即可