Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

一 组件

<div id="app">
    <h1>{{ msg }}</h1>
</div>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    // 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
    // 每个组件组件均拥有模板,template
    var app = new Vue({
        // 根组件的模板就是挂载点
        el: "#app",
        data : {
            msg: "根组件"
        },
        // 根组件可以显式书写模板吗? 可以
        // 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
        // 根组件如果不书写自身模板,那么模板就采用挂载点,如果显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
        template: "<div>显式模板</div>"
    })
    // app.$template
</script>

根组件