Vue: main.js template: '<App/>' 的意义

Published by admin at 2022年11月8日

Tags

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

components 是声明有哪些组件
template 是使用哪个组件官方文档
el: '#app' 是index.html 的<div id="app"></div>
App.vue <div id="app">xxxxxxxx</div> 会替换index.html中的<div id="app"></div>，因为外层元素都是<div id="app"></div> 所以都是感觉只是替换了里面的

如果把index.html中改为：

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

App.vue中改为：

<div id="app" class="bbb">
  ...
</div>

查看浏览器检查就会发现<div id="app" class="aaa"></div>被<div id="app" class="bbb">...</div>替换掉了：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>hello</title>
  </head>
  <body>
    <div id="app" class="aaa"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

Vue: main.js template: '<App/>' 的意义

发表回复 取消回复

发表回复取消回复