关于 vue 中 id = ‘app'

在vue的项目开发中,我们通过vue-cli生成的项目结构中 有一个public目录 该目录下有一个index.html 文件 如图:

image.png

( 我们通过webpack打包生成dist目录中的index.html 文件 是通过该文件作为模板生成的)

在该文件中有一个 id 为 app 的 div标签

image.png

该标签就是 我们 vue 实例 编译完成 生成真是 dom 的挂载点

我们在入口文件 main.js 中 通过 $mount 挂载指定的 ’#app' 就是指向该标签

image.png

如果 想手动修改挂载点 可以在 上述的 index.html 中添加或者修改 id = 'app' 的标签

比如可以改为:

image.png

此时 需要在main.js 中 修改 $mount 的id

image.png

此时就完成了 挂载点修改

需要注意的是 完成挂载时 vue 实例生成的 dom 节点会覆盖 在index.html 中的标签 所以在实际dom中 找不到 id = 'app' 或者 id = 'app-qk-sub-vue' 的标签

所以 在 App.vue的根节点上 同时页设置了一个 id = 'app' 的标签

image.png

这样当vue根实例挂载到dom后便会 有一个id = 'app' 的根元素 可以通过这个根元素来查找里面的内容

这个id 可以任意修改成你想要改的内容 而不会影响 vue 实例的挂载

Guess you like

Origin juejin.im/post/7068936207329132557