vue入门：（组件）

模板：（template）模板声明了数据和最终展现给用户的DOM之间的映射关系。
初始数据：（data）一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态。
接收外部参数：（props）组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式声明为双向绑定。
方法：（methods）对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
声明周期钩子函数：（lifecycle hooks）一个组件会触发多个生命周期钩子函数，比如created、attached、destroyed等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，这可以理解为Controller的逻辑被分散到了这些钩子函数中。

一、注册组件

全局组件
局部组件

1.1全局组件注册：Vue.component('didi-component',DIDIComponent)

参数1（'didi-component'）：注册组件的名称，即在HTML中可以使用对应名称的自定义标签来添加组件：<didi-component></didi-component>，名称除了使用中划线与html中添加自定义标签一致以外，还可以使用小驼峰命名方式来定义名称，同样vue内部会自动匹配到中划线的html自定义标签上，即‘didi-component’同等于‘didiComponent’，也有不规范的写法直接自定义任意英文字符，不采用连接符（中划线）也不采用小驼峰命名，也是可以的，后面示例中会有出现。

参数2（DIDIComponent）：注册组件的钩构造函数Function,也可以是Object。

1 //组件构造器构造组件：
2 var MyComponent = Vue.extent({
3     //选项...
4 })
5 //传入选项对象注册全局组件：
6 Vue.component('didi-component',{
7     template:`<div>A custom component!</div>`
8 })

实例代码（代码折叠）：

 1 <div >
 2     <didi-component></didi-component>
 3 </div>
 4 <script>
 5     var DIDIComponent = Vue.extend({
 6         template:`<div>A custom component!</div>`
 7     })
 8     //注册
 9     Vue.component('didi-component',DIDIComponent)
10     //创建vue根实例
11     new Vue({
12         el:'#example'
13     })
14 </script>

View Code