第一段代码注意：1、<template>必须写在body中，不能写在<script>中
2、components:{}中只有一个zi是ES6的语法糖写法，相当于zi:zi
<body>
<template id="zi">
<div>
<h1>hello</h1>
</div>
</template>
</body>
<!--使用Vue.extend声明组件-->
<script>
const zi=Vue.extend({
template: '#zi',
})
const app=new Vue({
el: '#app',
components: {
zi
}
})
</script>和
<body>
<template id="zi">
<div>
<h1>hello</h1>
</div>
</template>
</body>
<script>
const app=new Vue({
el: '#app',
components: {
zi:{
template: '#zi',
}}})
</script>和
（将template省略，改为用 `` 引用，但是这种写法比较繁琐很难看清楚，不推荐使用）
<script>
const app=new Vue({
el: '#app',
data:{
num1: 1,
num2: 2
},
components: {
zi:{
<!--下面这行--!>
template: `
<div>
<h1>hello</h1>
</div>
`
}}})
</script>都能将子组件局部注册到Vue中，三者效果一样