Vue中el的理解

Vue中的el，称之为挂载点。原理来自于：MVC架构中，使用一个标签当做容器包住一些标签，使得标签被重新渲染，同时保留一些必要的属性。<body id="body">{{ message }}<h2 id="app" class="app">{{ message }}<span> {{ message }} </span></h2>&lt

董厂长

10527人浏览 · 2021-10-12 22:42:09

董厂长 · 2021-10-12 22:42:09 发布

Vue中的el，称之为挂载点。原理来自于：MVC架构中，使用一个标签当做容器包住一些标签，使得标签被重新渲染，同时保留一些必要的属性。

<body id="body">
  {{ message }}
  <h2 id="app" class="app">
    {{ message }}
    <span> {{ message }} </span>
  </h2>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      // el:"#app",  //对应的 id选择器
      // el:".app",  //对应的 class选择器
      // el:"div",   //对应的 html类型
      el:"#body",
      data:{
        message:"hell！"
      }
    })
  </script>
</body>

选择挂载点为 #app .app div 时候，输出为： {{message}} hell! hell!

但是选择挂载点为body标签时候，输出为： {{message}} {{message}} {{message}}

通过上面的测试可以发现上面的三个问题，对应的解答结果如下：