关于VUE：添加的component组件无效|vue对象实例化和component定义的先后顺序问题|vue问题

问题：
我定义了一个组件component，想在页面中显示该组件。

 <div id="app">
        {{title}}<br/>
        <component1></component1>
    </div>

<script>
    var vue1 = new Vue({
        el:'#app',
        data:{
            title:'aaaaaaaa'
        }
    });
    Vue.component("component1",{
        template:'<div>{{name}}<button type="button" @click="showContent()"></button><br/></div>',
        data:function (){
            return{
                name:'Lotte'
            }
        },
        methods:{
            showContent:function (){
                vue1.title = 'funck U'
            }
        }
    })
</script>

运行后，页面中并没有组件中定义的内容，且控制台提示没有找到该组件。

原因：
该组件没有加载成功

解决：
vue页面在实例化vue对象时会将定义的所有组件全部注册，因此必须先定义组件，再实例化vue对象。
代码改为：

<script>
    Vue.component("component1",{
        template:'<div>{{name}}<button type="button" @click="showContent()"></button><br/></div>',
        data:function (){
            return{
                name:'Lotte'
            }
        },
        methods:{
            showContent:function (){
                vue1.title = 'funck U'
            }
        }
    })
    var vue1 = new Vue({
        el:'#app',
        data:{
            title:'aaaaaaaa'
        }
    });
</script>

页面有显示组件内容，并且不报错。

---

                                    感谢收阅