组件化(模块)
组件化三步骤
1、创建组件构造器
2、注册组件
3、使用组件
Vue.extend()
调用Vue.extend()创建的是一个组件化构造器
通常在创建组件构造器时,传入template代表我们自定义组件的模板
该模板就是在使用到组件的地方,要显示的html代码
<!DOCTYPE html>
<html>
<head>
<title>修饰符</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
// 3、使用组件 必须在vue实例中
<my-cpn></my-cpn>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 1、创建组件构造器对象
const cpnC = Vue.extend({
template:`<div>
<h2>标题</h2>
<p>内容</p>
</div>`
})
// 2、注册组件
//Vue.component('组件标签名')
Vue.component('my-cpn',cpnC)
let app = new Vue({
el:"#app",
data:{
},
})
</script>
</body>
</html>