vue el和template的关系

一、简介： 

       本篇文章主要介绍el属性和template属性的关系： 一句话来概括，当el和template同时出现的时候，template中的代码会替代el挂载的DOM元素。

const app = new Vue({
    el: '#app',
    data: {
        message: 'hello',
        name: 'lzc'
    },
    template: `
        <div>
            <h2>{{message}}</h2>
            <button>按钮</button>
        </div>
    `
});

        看例子：

        1. 这是index.html中，el属性挂载的DOM元素:

        

       2. 这是template的模板代码：

        

        最终浏览器的执行结果是：

        

        由此可以验证我开头那句话，当el属性和template属性同时出现的时候，template属性中的代码会替代掉el属性挂载的DOM元素。