用vue-cli创建的项目中index.html里的id="app"与App.vue中的id="app"为何不会冲突


引用自:https://segmentfault.com/a/1190000021043760

通过vue-cli创建vue项目时,默认的渲染主页是public/index.html文件,它里有一个id=“app”的div元素。而在主组件src/App.vue的template里也有一个id=“app”的根元素,为何在渲染时两者不会冲突?
原因如下:
作为入口文件的src/main.js,创建了应用的vue根实例。
根实例的el选项或者实例方法$mount()的参数,提供了一个已经存在的DOM元素作为挂载Vue实例的挂载目标。此处挂载元素是index.html中的id为’#app’的div元素。
根实例的render选项,接收createElement方法作为第一个参数用来创建VNode。而createElement又接收APP组件作为参数。
render渲染函数生成的VNode将会替换掉挂载元素,即App.vue组件的模板内容将会替换掉index.html中的挂载元素’#app’。最终渲染出来的页面中的’#app’元素是App.vue组件中的。
注:rende渲染函数是字符串模板template的代替方案。使用构建工具时,vue.js使用的是不包含编译器的运行时版,而template一定要通过编译器编译成渲染函数,所以就用render替代了template。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM