var com1=Vue.extend({
template:‘<h2>使用Vue.extend创建的组件</h2>‘
})
//2.1.2、使用Vue.component("组件的名称"， "接收组件的模板的结构的名称 ")
// 组件的名称是自己起的，如果使用驼峰命名时，上面使用组件名称时，要将驼峰命名的组件改成一相连接的名称，如果没有使用驼峰命名，只需将名称写到也页面中
<!-- 使用驼峰命名的组件 -->
// Vue.component("myCom1",com1)
Vue.component("mycom1",com1)
2.1.3、使用全局的组件时，只需要将组件的名称写上el进行控制的区域即可
<!-- 使用驼峰命名的组件 -->
<!-- <my-com1></my-com1> -->
<!-- 没有使用驼峰命名的组件 -->
<mycom1></mycom1>
2.2.1直接使用Vue.component("组件的名字"，{template模板结构})
//、使用Vue.compontent创建组件,模板字符串中，只能有一个根源素标签
Vue.component("myCom2",{
// template:‘<h3>直接使用Vue.compontent创建组件</h3><span>123</span>‘
template:‘<h3>直接使用Vue.compontent创建组件</h3>‘
})
2.2.2、使用全局的组件时，只需要将组件的名称写上el进行控制的区域即可
<!-- 使用驼峰命名的组件 -->
<!-- <my-com1></my-com1> -->
<!-- 没有使用驼峰命名的组件 -->
<mycom1></mycom1>
2.3
<div id="app">
<!-- 3、直接将组件的名称写到这里面 -->
<my-com3></my-com3>
</div>
<!-- 2、将template模板html抽离出来之后，可以在根元素里面创建多个元素 使用template元素进行包裹-->
<template id="temp1">
<!-- div表示仅有一个根元素 -->
<div>
<h4>这是通过抽离的template元素进行创建的组件</h4>
<h6>这里面可以写多写标签</h6>
</div>
</template>
<script>
//1、使用Vue.compontent创建组件,模板字符串中，只能有一个根源素标签,所以将template抽离出来，定义到与#app同级的位置，
Vue.component("myCom3",{
// template:‘<h3>直接使用Vue.compontent创建组件</h3><span>123</span>‘
template:‘#temp1‘
})
var vm = new Vue({
el:"#app",
data:{},
methods: {
},
})
私有组件components
<div id="app">
<!-- 报错 -->
<!-- <person></person> -->
</div>
<div id="app2">
<person></person>
</div>
<template id="temp1">
<h3>这是通过template进行抽离出来的#app2的私有组件，在#app中不能进行使用</h3>
</template>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods: {
},
})
var vm = new Vue({
el:"#app2",
data:{},
methods: {},
components:{
person:{
// template:"<h3>这是#app2的私有组件，在#app中不能进行使用</h3>"
template:"#temp1"
}
}
})
</script>
