![]()
![]()
vue
哪位大神知道vue-cli-----vue实例中template:'是什么意思吗？
回帖（1）
2020-11-5 16:00:48
模板将会替换挂载的元素。挂载元素的内容都将被忽略
也就是说:template: '' 表示用替换index.html里面的
如果还是不明白，改成这样子就好理解了：
index.html
main.js
new Vue({ el:'#myapp', router, components:{App} }) 这样写的意思是：实例化一个Vue，挂载到id为myapp的div里面，这个vue实例有个局部组件App。
简单的验证方法，在index.html中，在div根标签中编写一个文本，看加载App组件的时候是否会显示，还是被替换：
例如我在index.html中加的为：
王小子
当项目启动访问后是看不到王小子这几个字的，说明
这个标签整个都会被替换掉，所以即使我们看到APP.vue文件中定义的根标签也为'',也不会冲突的原因
webpack的模板写得这么绕的原因：（个人猜测）
- 如果像我那样写，dom树多了个不必要的div层
- 旧的版本应该是可以把实例挂载到body、header元素的，但是新的版本会报错：不要尝试挂载到body元素。
模板将会替换挂载的元素。挂载元素的内容都将被忽略
也就是说:template: '' 表示用替换index.html里面的
如果还是不明白，改成这样子就好理解了：
index.html
main.js
new Vue({ el:'#myapp', router, components:{App} }) 这样写的意思是：实例化一个Vue，挂载到id为myapp的div里面，这个vue实例有个局部组件App。
简单的验证方法，在index.html中，在div根标签中编写一个文本，看加载App组件的时候是否会显示，还是被替换：
例如我在index.html中加的为：
王小子
当项目启动访问后是看不到王小子这几个字的，说明
这个标签整个都会被替换掉，所以即使我们看到APP.vue文件中定义的根标签也为'',也不会冲突的原因
webpack的模板写得这么绕的原因：（个人猜测）
- 如果像我那样写，dom树多了个不必要的div层
- 旧的版本应该是可以把实例挂载到body、header元素的，但是新的版本会报错：不要尝试挂载到body元素。
举报
更多回帖
