vue中template:'<App/>'及components:{App}这种写法是什么意思？

Question

components：{App}中App变量在哪里定义的，不是只有一个App.vue的文件名吗？没找到App变量啊！！在vue的todo-list例子中：components的b写法是这样的：components:{ '标签名'：变量名}，如components:{'todo-list':TodoList},此处components：{App}，的写法，既没有标签，也没有变量，如何理解？
还有template的写法：template: '<App/>'，template中应该定义的是标签，我想问一下，<App>标签又在哪里呢？好像没有这个标签啊！

Answer 1

1. 你说的components：{App}应该是在main.js入口文件中吧，这样的话App应该是App.vue组件中通过export default导出APP变量出来的，然后在main.js中通过import 导入App变量
2. components：{App} 写法是ES6的写法，在对象中，如果键值对一样的话，只写一个就可以
3. template: '<App/>' 这里面也涉及到一个简写的处理，如果你不在组件上面添加属性或者指令的话，你就可以写成但标签的形式 <App/>其实就是 ‘ <App><App/>’
4. <App>标签又在哪里呢 <App>这样写就是代表APP这个组件 template: '<App/>'就是代表使用APP组件的模板

以上属于个人理解，如有不妥欢迎拍砖

Answer 2

vue 模板语法是这样的：

html:
<div id='app'>
    <!-- 调用该组件之前必须先注册该组件! -->
    <test></test>
</div>

js:
new Vue({
    components: {
        // 注册 test 组件
        test: {
            template: '<div class="test">我是 test 组建内容！</div>'
        }
    }
});

上面的应该一看秒懂。你看不懂的是使用了ES6+（含）语法的代码：

// 组件
let App = {
    template: '<div>欢迎使用！</div>'
}:

new Vue({
    // template 渲染的 html
    // 这跟上面是一样的，必须先注册 App 组件
    // 然后在模板中引用
    // <App /> 是简写形式，等价于 <App></App>
    template: '<App />'
    components: {
        // es6 语法, 键名和变量名一致
        App
    }
});

ES6+语法-阮一峰

Answer 3

@jzsn 感谢回答！！！对您回答的第4点，还是不明白，<App>标签是不是就是App组件(App.vue)中模板的内容？