扩展

虽然前文中并没有讲解组件，也没有介绍 template 属性，但这里把结论先告诉大家，用以理解知识点。

情况一：Vue 实例中既没有 el 属性，也没有 template 属性，程序会报错。
情况二：只有 el 属性，el 中的 HTML 代码就是要渲染的内容。
情况三：只有 template 属性，template 中的代码就是要渲染的内容（组件详解）。
情况四：template 属性和 el 属性都存在时，这是扩展中的重点。当两者都存在时，template 中的内容会替换 el 中的内容，因为 template 的优先级高于 el，代码如下。

视图层代码如下。

<div id="app" v-cloak>
    <h1>{{ msg }}</h1>
</div>

M 层代码如下。

<script>
    var vm = new Vue({
        el: '#app',
        template: '<h1>我是template内容</h1>',
        data: {
            msg: 'Hello World'
        },
        methods: {}
    });
</script>

运行结果如图 3-8 所示。

Figure 1. 图3-8　渲染template标签内容

运行结果显示，el 控制的 div 盒子会被 template 模板中的内容替换。