具体描述
- 在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: '',
components: { App }
})结论
- index.html中的< div id=”app”>是指定绑定元素根路径的
- App.vue的< div id=”app”>则是用于具体注入绑定元素的内容
- 由于Vue组件必须有个根元素，所以App.vue里面，根元素< div id=”app”>与外层被注入框架index.html中的< div id=”app”>是一致的
- index.html中的#app指定绑定目标，而vue文件里的#app提供填充内容，两者在运行时指的是同一个DOM元素
推荐阅读
- React vs. Angular vs. Vue.js –这是2020年的最佳选择（）
- 毕业设计|SpringMVC+Vue项目疫情社区管理系统
- 毕业设计|SpringMVC+Vue项目网上办公自动化系统
- 课程设计|SpringMVC+Vue项目智慧社区管理系统
- 课程设计|SpringMVC+vue实现前后端分离的药品管理系统
- vue|vue实现短信验证码登录
- vue性能优化|记一次前端性能优化——vue-cli4优化首屏加载
- vue|vue-cli3前端性能优化与首屏加载优化（2020-06-17）
- 前端|前端性能优化-综合篇