【el和template区别】

main.js中

import Vue from 'vue'
 new Vue({
    
       el: ' #app',
       data: {
    
              name:'chen'
            }
        })

index.html中

 <div id="app">
        {
    {
    message}}
    </div>

正常运行之后，我们来考虑一个问题：

• 如果我们希望将data中的数据显示在界面中，就必须是修改index.html
• 如果我们后面自定义了组件，也必须修改index.html来使用组件
• 但是html模板在之后的开发中，我并不希望手动的来频繁修改，是否可以做到呢？

定义template属性：

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

我们可以再定义一个template属性，代码如下：

  new Vue({
    
            el: '#app',
            template: '<div id="app">{
    {message}}</div>',
            data: {
    
                message: '你好啊！'
            }
        })

重新打包，运行程序，显示一样的结果和HTML代码结构

那么，el和template模板的关系是什么呢？

• 在我们之前的学习中，我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
• 而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

这样做有什么好处呢？

• 这样做之后我们就不需要在以后的开发中再次操作index.html，只需要在template中写入对应的标签即可

但是，书写template模块非常麻烦怎么办呢？

• 没有关系，之后会将template模板中的内容进行抽离。会分成三部分书写：template、script、style，结构变得非常清晰。