即将创建组件构造器和注册组件合并书写
一、代码
null
<!--作者: ikunsdc -->
<!--日期Date: Do not edit -->
null
<!--作者：ikunsdc-->
<!--开发时间：2021/02/28 00:51-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>全局组件注册的语法糖</h1>
<cpn1></cpn1>
<hr>
<h1>局部组件注册的语法糖</h1>
<cpn2></cpn2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 1.全局组件注册的语法糖方式
/* 之前的写法
// 1.创建组件构造器
const cpnC1 = Vue.extend({
template:`
<div>
<h2>我是全局组件（cpnC1）</h2>
<p>我是内容：哈哈哈</p>
</div> `
})
// 2.注册组件
Vue.component('cpn1',cpnC1) */
//全局组件注册的语法糖写法，内部自动调用extend()
Vue.component('cpn1',{
template:`<div>
<h2>我是全局组件cpnC1</h2>
<p>我是内容，哈哈哈哈</p>
</div>`
})
//2、局部组件注册的语法糖方式
/* 之前的写法
// 1.创建组件构造器
const cpnC2 = Vue.extend({
template:`
<div>
<h2>我是局部组件（cpnC2）</h2>
<p>我是内容：哈哈哈</p>
</div> `
})
// 2.注册局部组件
const app = new Vue({
el:"#app",
data:{
},
components:{
cpn2 :cpnC2
}
}) */
//语法糖
const app = new Vue({
el:"#app",
data:{
},
components:{
cpn2:{
template:`<div>
<h2>我是局部组件</h2>
<p>我是内容，呵呵呵</p>
</div>`
}
}
})
</script>
</body>
</html>
二、运行
