<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<!--组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可-->
<!--组件化和模块化的不同-->
<!--模块化：是从代码逻辑的角度进行划分的-->
<!--组件化：是从UI界面的角度进行划分的-->
<div id="app">
<my-com1></my-com1>
<my-com2></my-com2>
<my-com3></my-com3>
</div>
<template id="tmp1">
<div>
<h1>这是通过template元素，在外部定义的组件结构</h1>
</div>
</template>
<script>
// ********************************************************************************************************************************
// 1.1使用Vue.extend来创建全局的Vue组件
var com1=Vue.extend({
template:'<h3>这是使用Vue.extend创建的组件</h3>'
//通过template属性，指定了组件要展示的HTML结构
});
// 1.2使用Vue.compoent('组件的名称'，创建出来的组件模板对象)
Vue.component('myCom1',com1);
//********************************************************************************************************************************
//组件无论是那种方式创建出来的，组件的template属性指向的模板内容，必须有且只能有唯一的根元素
Vue.component('myCom2',Vue.extend({
template:'<h3>这是第二个使用Vue.extend创建的组件</h3>'
}))
//********************************************************************************************************************************
Vue.component('myCom3',{
template:'#tmp1'
});
var vm=new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>
