Vue: main.js template: '<App/>' 的意义Vue: main.js template: '<App/>' 的意义Vue: main.js template: '<App/>' 的意义Vue: main.js template: '<App/>' 的意义
  • 首页
  • 博客
  • 书签
  • 文件
  • 分析
  • 登录

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

发表 admin at 2022年11月8日
类别
  • Vue
标签
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>

发表回复 取消回复

要发表评论,您必须先登录。

类别

  • Cat
  • Python
  • Django
  • Database
  • Html/CSS
  • JavaScript
  • Vue
  • RegExp
  • Maths/AI
  • PHP/Wordpress
  • Practice
  • Linux
  • Windows
  • Android
  • NAS
  • Software
  • Hardware
  • Network
  • SEO
  • English
  • Games
  • Recipes
  • General
  • Memorandum
  • Essays
  • 未分类

归档

©2015-2023 艾丽卡 Blog support@alaica.com
      ajax-loader