Vue组件

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>