使用cli构建项目后，在根目录下有个index.html文件，其中有一行代码为：
极客观点
项目管理
HarmonyOS
// index.html
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>而src目录下的App.vue中也有id="app"的代码
// APP.vue
<template>
<div id="app">
<h1 class="title">头部</h1>
<router-view></router-view>
</div>
</template>// main.js
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})问题：
1.在main.js的初始化中，el：'#app'到底绑定的是哪个文件中的id='app'
2.为什么需要两个相同的id？
替换了而已。
<div id="app"></div>new Vue({
el: '#app',
template: '<div id="app">hello world</div>'
})渲染的结果是 <div id="app">hello world</div>
<div id="a"></div>new Vue({
el: '#a',
template: '<div id="app">hello world</div>'
})渲染的结果是 <div id="app">hello world</div>
<div id="app"></div>new Vue({
el: '#app',
template: '<div id="box">hello world</div>'
})渲染的结果是 <div id="box">hello world</div>
6 回答2.9k 阅读✓ 已解决
6 回答2.3k 阅读
5 回答6.3k 阅读✓ 已解决
2 回答2k 阅读✓ 已解决
2 回答1.5k 阅读✓ 已解决
2 回答978 阅读✓ 已解决
2 回答1.7k 阅读✓ 已解决
已实验过，将
index.html的id="app"改成其他值，会报错。因此，el: '#app'绑定的是index.html中的id="app"的元素已检查过生成的页面代码，其中只有一个
<div id="app"></div>，下面有一行注释<!-- built files will be auto injected -->，所以可以判断，此段来自index.htmlindex.html中的<div id="app"></div>是指定绑定元素根路径的App.vue的<div id="app"></div>则是用于具体注入绑定元素的内容由于Vue组件必须有个根元素，所以App.vue里面，根元素
<div id="app"></div>与外层被注入框架index.html中的<div id="app"></div>是一致的index.html中的#app指定绑定目标，而vue文件里的#app提供填充内容，两者在运行时指的是同一个DOM元素。