vue專案根目錄下index.html中的id="app"，與src目錄下的App.vue中的id="app"為什麼不會衝突
阿新 • • 發佈：2019-01-24
使用cli構建專案後，在根目錄下有個index.html檔案，其中有一行程式碼為：
// 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 // main.js
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})
問題：
1.在main.js的初始化中，el：'#app'到底繫結的是哪個檔案中的id='app'
2.為什麼需要兩個相同的id？
-
已實驗過，將
index.html的id="app"改成其他值，會報錯。因此，el: '#app'繫結的是index.html中的id="app"的元素 -
已檢查過生成的頁面程式碼，其中只有一個
<div id="app"></div>，下面有一行註釋<!-- built files will be auto injected -->，所以可以判斷，此段來自index.html-
index.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元素。
-