w3c为什么有组件概念？
现在的前端领域，对于代码的质量和数量有着非常高的要求，特别容易出问题。
通过组件的方式来完成代码的管理和编写。
组件：是一个可以被反复使用的 带有指定功能的 视图
组件化编程 一切都是组件component，把可以被反复使用的任何的视图 都可以封装成组件。
类似玩积木。
组件化的好处（封装）：
提高开发速度
提高代码的复用率
降低耦合度
提高代码的质量
降低测试难度
1、组件的创建
Vue.component('my-component',{
template:'<h1>it is a component</h1>'
})
2、组件的使用
件的使用就像是使用普通的html标签一样
<my-component> </my-component>
建议：组件的命名和使用 建议来使用烤串式命名规则。
（如果组件的名字写成驼峰式 myComponent,使用依然还得是烤串式）
注意：
如果一个组件要渲染多个元素，将多个元素放到一个顶层标签；否则会报错。
3、复合组件
组件可以像html一样来使用，复合组件并不是一个新的概念，就是一个组件，只不过该组件中又调用了其它的组件。
一个完整的Vue的项目，可以比作是一颗组件树，组件树的根 就是 根组件（my-article）....
组件树可以帮助我们降低业务的复杂度，避免出现一些错误，提高开发速度。
4、组件的生命周期
分为4个阶段：
create/mount/update/destroy
每一个阶段都对应着有自己的处理函数
create: beforeCreate created
初始化
mount: beforeMount mounted
和挂载相关的处理
update: beforeUpdate updated
根据要更新的数据 做逻辑判断
destroy:beforeDestroy destroyed
清理工作
在Vue的实例或者在组件，都有哪些属性？
el
data
methods
directives
filters
watch
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>组件的创建</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <!--组件的调用 --> <my-component></my-component> </div> <script> //组件的创建 Vue.component(/*组件名*/"my-component",/*对象*/{ //template属性 template: ` <h1>这是一个组件</h1> ` }) new Vue({ el:"#container", data:{ msg:"hello Vue" } }) </script> </body> </html>