Note for the first code: 1. <template> must be written in the body, not in the <script>
2. Only one zi in components:{} is the syntax sugar of ES6, which is equivalent to 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>with
<body>
<template id="zi">
<div>
<h1>hello</h1>
</div>
</template>
</body>
<script>
const app=new Vue({
el: '#app',
components: {
zi:{
template: '#zi',
}}})
</script>with
(Omit the template and use `` to quote, but this writing method is more cumbersome and difficult to see clearly, so it is not recommended to use)
<script>
const app=new Vue({
el: '#app',
data:{
num1: 1,
num2: 2
},
components: {
zi:{
<!--下面这行--!>
template: `
<div>
<h1>hello</h1>
</div>
`
}}})
</script>
All sub-components can be registered locally in Vue, the effect of the three is the same