Vue组件基础

new Vue() 就可以认为是一个大组件，但多个实例这样太low了，Vue为我们提供了Component。

1.全局注册的组件
要注册一个全局组件，你可以使用 Vue.component(tagName, options)，例如：

        //注册        Vue.component('my-component', {            template: '<div>一个自定义的组件</div>'        });        //创建根实例        var vm = new Vue({            el:'#box',        });

注册一定要在实例化之前。
然后就可以在模板上使用名为my-component的这个组件了:

    <div id="box">        <my-component></my-component>    </div>

同样可以有data，但组件里的data是一个函数，该函数返回一个对象：

        Vue.component('my-component', {            template: '<div>{{msg}}</div>',            data:function(){                return {msg:'我的标题'}            }        });

组件中的事件，还是照样写：

        Vue.component('my-component', {            template: '<div @click="change">{{msg}}</div>',            data:function(){                return {msg:'我的标题'}            },            methods:{                change(){                    alert(1)                }            }        });

2.局部注册

        //定义组件        var child = {            template: '<div @click="change">{{msg}}</div>',            data:function(){                return {msg:'我的标题'}            },            methods:{                change(){                    alert(1)                }            }        };        //创建根实例        var vm = new Vue({            el:'#box',            components:{                'my-component':child            }        });

所谓“局部组件”就是放的一个组件的里面，这里Vue的实例其实就是一个大组件。
先定义好组件，然后在Vue实例化的时候传入。