vue根目錄下的index.html中的id="app"與src目錄下的App.vue中的id="app"為什麼不會沖突

具體描述

• 在vue的項目開發中，我們通過vue-cli生成的項目結構中預設有index.html的檔案作為預設的渲染首頁檔案它的外層div有id=”app”，而在項目的src目錄中主元件App.vue中它的外層div也有id=”app”，兩者在渲染時為什麼不會沖突？

相關探讨

• 我們先來了解一下vue項目中main.js、App.vue、index.html間的關系
  • main.js是入口檔案，主要作用是初始化vue執行個體并使用需要的插件
  • App.vue是我們的主元件，所有的頁面都是在App.vue下進行切換的；也可以認為所有的路由也是App.vue的子元件
  • index.html是vue-cli構的項目結構中預設的主渲染頁面檔案
• 我們先來了解一下src/main.js中template的作用
  • 一個字元串模闆作為 Vue 執行個體的辨別使用。模闆将會替換挂載的元素。挂載元素的内容都将被忽略，除非模闆的内容有分發插槽
  • 下面代碼中的’ template: < App/> ‘指代引入的App元件，用來取代index.html中id為app的div層及其内容，反過來說，最初el挂載的id為app的節點指的是index.html的節點而不是app.vue的，隻是後來由于template而被主元件App.vue的内容所取代了而已

import Vue from 'vue'
            import App from './App'
            import router from './router'

            Vue.config.productionTip = false

            /* eslint-disable no-new */
            new Vue({
              el: '#app',
              router,
              template: '<App/>',
              components: { App }
            })
           

結論

1. index.html中的< div id=”app”>是指定綁定元素根路徑的
2. App.vue的< div id=”app”>則是用于具體注入綁定元素的内容
3. 由于Vue元件必須有個根元素，是以App.vue裡面，根元素< div id=”app”>與外層被注入架構index.html中的< div id=”app”>是一緻的
4. index.html中的#app指定綁定目标，而vue檔案裡的#app提供填充内容，兩者在運作時指的是同一個DOM元素