具體描述

• 在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元素