<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<!--
组件：就是为了拆分Vue实例的代码量，能够让我们以不同的组件，来划分功能模块
模块化：从代码逻辑的角度进行划分的，方便代码分层开发，保证每个功能模块的职能单一
组件化：从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用
-->
<!--创建组件的方式-->
<div id="app">
<!--驼峰命名-->
<!--<my-com1></my-com1>-->
<!--不使用驼峰命名-->
<!--<mycom1></mycom1>-->
<!--第3种创建方式-->
<mycom3></mycom3>
</div>
<template id="temp1">
<div>
<h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的只能提示和高亮</h1>
<h4>123456</h4>
</div>
</template>
<script>
//创建组件的方式1：================================================
//1：使用Vue.extend 来创建全局的Vue组件
// const com1=Vue.extend({
// //通过 template 属性，指定了组件要展示的HTML结构
// template:'<h3>这是使用 Vue.extend 来创建的组件</h3>'
// });
//2：使用Vue.component('组件的名称'，创建出来的组件模板对象)
// Vue.component('myCom1',com1);
//如果使用 Vue.component 定义全局组件的时候，组件名称使用了驼峰命名法，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时两个单词之间使用 - 连接
//如果不使用驼峰命名，则直接拿名称来使用
// Vue.component('mycom1',com1);
//简写：s
// Vue.component('mycom1',Vue.extend({
// template:'<h3>这是使用 Vue.extend 来创建的组件</h3>'
// }));
//创建组件的方式2：================================================
// Vue.component('mycom1',{
// //注意：不论是哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个根元素
// template:'<div><h3>这是使用 Vue.component 来创建的组件</h3><span>123</span></div>'
// });
//创建组件的方式3：================================================
Vue.component('mycom3',{
template:'#temp1'
});
//3种创建组件都需要创建vue 实例
const vm=new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
</body>
</html>