vue项目根目录下index.html中的id="app",与src目录下的App.vue中的id="app"为什么不会冲突
来源:互联网 发布:mac ai抠图教程视频 编辑:程序博客网 时间:2024/05/04 10:04
使用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></router-view> </div></template>
// main.jsnew 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元素。
阅读全文
0 0
- vue项目根目录下index.html中的id="app",与src目录下的App.vue中的id="app"为什么不会冲突
- vue项目中,main.js,App.vue,index.html如何调用
- vue项目打包App
- ios 开发 app id 冲突
- App ID
- apple 的 app id
- vue开发app项目实例
- HBuilder打包app(vue项目)
- Vue, App与我(七)
- Vue, App与我(十一)
- Vue, App与我(十二)
- Vue, App与我(十三)
- Vue, App与我(十四)
- vue仿卷皮折扣App
- http://jxnu.acmclub.com/index.php?app=problem_title&id=468&problem_id=1017
- vue.js开发外卖App项目的内容总结(四)
- 混合APP开发的套路(二):加载项目中的html
- Vue, App与我(一)
- Android Studio中上传项目到码云时的一些问题
- Linux教程【3】VMWare的三种网络连接方式-远程登录管理工具SecureCRT-Winscp文件拷贝工具
- Apache httpd.conf配置文件 3(虚拟主机)
- HTML,angularJS表格内容排序,点击删除,删除当前,输入内容显示包含内容的数据
- mysql服务性能优化—my.ini配置说明详解 16G内存
- vue项目根目录下index.html中的id="app",与src目录下的App.vue中的id="app"为什么不会冲突
- 从零开始前端学习[40]:css3中的resize,user-select属性,多列布局特性,怪异盒子模型,倒影
- rtklib使用kalman滤波进行高精度相对定位原理
- SwipyRefreshLayout 上拉刷新,下拉加载
- 2017年10月15日训练总结
- Ubuntu 14 安装scrapy
- MVP实现登录注册功能
- 实验4
- Detours的使用