我刚开始学,看这个东西看了好久,官网文档的描述我不太理解,今天终于算明白了
官网的描述:
模板将会替换挂载的元素。挂载元素的内容都将被忽略
也就是说:template: '<App/>'
表示用<app></app>
替换index.html
里面的<div id="app"></div>
如果还是不明白,改成这样子就好理解了:
index.html
<div id="myapp">
<app></app>
</div>
main.js
new Vue({
el:'#myapp',
router,
components:{App}
})
这样写的意思是:实例化一个Vue,挂载到id为myapp的div里面,这个vue实例有个局部组件App
。
简单的验证方法,在index.html中,在div根标签中编写一个文本,看加载App组件的时候是否会显示,还是被替换:
例如我在index.html中加的为:
<div id="app">
<h1>王小子</h1>
</div>
当项目启动访问后是看不到王小子这几个字的,说明
这个标签整个都会被替换掉,所以即使我们看到APP.vue文件中定义的根标签也为'id="app"',也不会冲突的原因webpack的模板写得这么绕的原因:(个人猜测)
- 如果像我那样写,dom树多了个不必要的div层
- 旧的版本应该是可以把实例挂载到body、header元素的,但是新的版本会报错:不要尝试挂载到body元素。