vue实例中template: '<App/>',这样写是什么意思

Question

请教下各位vue大神

Answer 1

我刚开始学，看这个东西看了好久，官网文档的描述我不太理解，今天终于算明白了

官网的描述：

模板将会替换挂载的元素。挂载元素的内容都将被忽略

也就是说: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。

webpack的模板写得这么绕的原因：（个人猜测）

• 如果像我那样写，dom树多了个不必要的div层
• 旧的版本应该是可以把实例挂载到body、header元素的，但是新的版本会报错：不要尝试挂载到body元素。

Answer 2

前面讲的都是错误的
回答的简直误人子弟

new Vue({
el: '#app',
components:{App},
template: '<App/>'
})
components 是声明有哪些组件
template 是使用哪个组件
el: '#app' 是index.html 的<div id="app"></div>
App.vue <div id="app">xxxxxxxx</div> 会替换和index中的<div id="app"></div> 因为外层元素都是<div id="app"></div> 所以都是感觉只是替换了里面的

我这个回答应该是最清楚了

唯一一个不清楚的是index.html 中<div id="app"></div> 生成这个规定吗 还是可以改？

Answer 3

这个问题很简单，<App />他就是App.vue，template就是选择vue实例要加载哪个模板。最新的vue-cli脚手架模板现在是这个形式。App.vue是主程序，其他所有的.vue都是放在App.vue中，所以只需要加载App.vue就完全可以把其他的东西加载出来。

Answer 4

el是vue实例化的选项，提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

template，作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot

来自http://blog.csdn.net/wu__di/a...

Answer 5

Template里面的App就是在这个实例里面注册的App组件 也就是整个过程就是将el所标识的元素替换成<App/> 而App就是在此实例注册的App组件。

Answer 6

If neither render function nor template option is present, the in-DOM HTML of the mounting DOM element will be extracted as the template. In this case, Runtime + Compiler build of Vue should be used.
If render function is present in the Vue option, the template will be ignored.
The render function has priority over the render function compiled from template option or in-DOM HTML template of the mounting element which is specified by the el option.
如果渲染函数和模板选项,安装的在DOM HTML DOM元素提取模板。在这种情况下,应该使用Vue的运行时+编译器构建。如果渲染函数出现在Vue选项,该模板将被忽略。渲染函数优先于渲染函数编译模板选项或在dom HTML模板的固定元素指定的选项。