一丶案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>我是全局变量</h1>
<my_cpn></my_cpn>
<hr>
<h1>我是局部变量</h1>
<my_cpn1></my_cpn1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my_cpn',{
template:`<div>
<h2>我是标题</h2>
<p>我是内容,Blockchain</p>
<p>我是内容,Key</p>
</div>`
})
const app = new Vue({
el:"#app",
data:{
},
components:{
my_cpn1:{
template:`<div>
<h2>我是标题</h2>
<p>我是内容,Blockchain</p>
<p>我是内容,Key</p>
</div>`
}
}
})
</script>
</body>
</html>
二丶运行结果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e09f2fd78655163b17ef33ca38016e59.png)
——博观而约取,厚积而薄发——