什么是组件？
组件Component,可扩展HTML元素，封装可重用的代码。通俗的来说，组件将可重用的HTML元素封装成为标签方便复用；
组件的使用：
1、使用全局的方法Vue.extend创建构造器；
2、再使用全局的方法Vue.component注册组件；
注意：在Vue.component里需要指明组件的名称，组件名称不能使用内置标签名称，如body.推荐使用短横线命名规则。
如：
my-component 正确 （推荐使用）
my-Component 错误
mycomponent 正确
Mycomponent 正确
myComponent 错误
MyComponent 错误
示例：
vue 代码：
<script>
window.onload= () =>{ //创建构造器
let myComponent=Vue.extend({ template:"<h1>欢迎来到perfect*的博客园</h1>"
}); //注册组件
Vue.component('my-component',myComponent); new Vue({
el:'div',
data:{ } })}
</script>
html:
<div>
<my-component></my-component> </div>
使用注册组件简写的方式：
出现的问题：
修改后的效果：
vue代码：
//注册组件的简写方式
Vue.component('my-componenta',{
template:'<h2>hello vue</h2>'
});
html:
<my-componentA></my-componentA>
html标签是大小写不分的
组件的命名不支持驼峰命名方式
最终所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>component</title>
<script type="text/javascript" src="../js/vue.js" ></script> <script>
window.onload= () =>{ //创建构造器
let myComponent=Vue.extend({ template:"<h1>欢迎来到perfect*的博客园</h1>"
}); //注册组件
Vue.component('my-component',myComponent); //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello vue</h2>'
}); new Vue({
el:'div',
data:{ } })}
</script>
</head>
<body>
<div>
<my-component></my-component>
<my-componentA></my-componentA> </div>
</body>
</html>
组件的介绍