Vue组件化的基本使用

注册组件的基本步骤

组件的使用分成三个步骤

1、创建组件构造器

2、注册组件

3、使用组件

 

<!DOCTYPE html>
<html>
<head>
<title>组件</title>
<meta charset="utf-8" />

</head>
<body>
<div id="app">
<!--3使用组件-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
<script>

//1创建组件构造器对象
const cpnc= Vue.extend({
template:`
<div>
<h2>标题</h2>
<p>哈哈</p>
</div>
`
})

//2注册组件
Vue.component('my-cpn',cpnc)

const app=new Vue({
el:"#app",
data:{
message:'你好啊',
}
})


</script>
</body>
</html>

posted @ 2020-10-23 17:46  眰  阅读(140)  评论(0)    收藏  举报