vue根目录下的index.html中的id="app"与src目录下的App.vue中的id="app"为什么不会冲突

发布时间:2024-02-04 08:00

具体描述

  • 在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.htmlvue-cli构的项目结构中默认的主渲染页面文件
  • 我们先来了解一下src/main.js中template的作用
    • 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽
    • 下面代码中的’ template: < App/> ‘指代引入的App组件,用来取代index.html中idappdiv层及其内容,反过来说,最初el挂载的idapp的节点指的是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: \'\',
              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元素

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号