发 帖  
原厂入驻New
[问答]

vue-cli-----vue实例中template:'<App/>是什么意思?

33 vue template
分享
哪位大神知道vue-cli-----vue实例中template:'<App/>是什么意思吗?
0
2020-11-5 07:02:34   评论 分享淘帖 邀请回答
1个回答
模板将会替换挂载的元素。挂载元素的内容都将被忽略
也就是说:template: &#39;<App/>&#39; 表示用<app></app>替换index.html里面的<div ></div>
如果还是不明白,改成这样子就好理解了:
index.html
<div >     <app></app> </div>  main.js
new Vue({     el:&#39;#myapp&#39;,     router,     components:{App} })  这样写的意思是:实例化一个Vue,挂载到id为myapp的div里面,这个vue实例有个局部组件App。
简单的验证方法,在index.html中,在div根标签中编写一个文本,看加载App组件的时候是否会显示,还是被替换:
例如我在index.html中加的为:
     <div >       <h1>王小子</h1>     </div>  当项目启动访问后是看不到王小子这几个字的,说明
这个标签整个都会被替换掉,所以即使我们看到APP.vue文件中定义的根标签也为&#39;&#39;,也不会冲突的原因
  webpack的模板写得这么绕的原因:(个人猜测)


  • 如果像我那样写,dom树多了个不必要的div层
  • 旧的版本应该是可以把实例挂载到body、header元素的,但是新的版本会报错:不要尝试挂载到body元素。
2020-11-5 16:00:48 评论

举报

撰写答案

你正在撰写答案

如果你是对答案或其他答案精选点评或询问,请使用“评论”功能。

高级模式
您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
我要提问
关闭

站长推荐 上一条 /9 下一条

快速回复 返回顶部 返回列表