定义组件

页面结构

<div id="app">
    <test></test>

    <demo></demo>

    <hello-world></hello-world>
</div>

逻辑结构

//在外部定义组件
Vue.component('demo', {
    template: '<h1>这是在外部定义的自定义组件</h1>'
})

//驼峰写法的组件
Vue.component('HelloWorld', {
    template:'<h1>驼峰写法的组件</h1>'
})

var app = new Vue({
    el: '#app',
    //内部自定义组件
    components: {
        test:{
            template: '<h1>这是一个自定义组件</h1>'
        }
    }
})