创建Vue时template和el的关系

SPA（simple page application）单页面应用
多页面通过路由跳转vue-router(前端路由)

一般开发时只有一个index.html页面，所以在里面，一般只有这个，外面的壳，而没有里面的内容

el和template区别（一）：
提出问题模型：
如果外面希望将data中的数据显示在界面中，就必须是修改index.html
如果外面后面自定义了组件，也必须修改index.html来使用组件
但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到？

定义template属性：
在前面的Vue实例中，外面定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容
这里，我们可以将div元素中的{ {message}}内容删掉，只保留一个基本的id为div的元素
但是如果我依然希望在其中显示{ {message}}的内容，应该怎么处理呢？
我们可以再定义一个template属性

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

然后在vue中是这样的：

 new Vue({
    el: '#app',
    data: {
        message: '你好啊，李银河',
    }
})

但是这样应该怎么在页面中展现呢？
在vue实例中的template。

new Vue({
    el: '#app',
    template: `
    <div>
        <h2>{
  {message}}</h2>
        <button @click="btnClick">按钮</button>
        <h2>{
  {name}}</h2>
    </div>
    `,
    data: {
        message: '你好啊，李银河',
        name: 'codewhy'
    },
    methods: {
        btnClick() {

        }
    }
})

运行结果：