Vue 组件化

Vue组件化思想
1.尽可能将页面拆分成一个个小的，可复用的组件
2.使代码更加方便组织和管理，并且扩展性更强

一、组件的三个步骤
1.创建组件构造器
2.注册组件
3.使用组件

1）调用vue.extend()方法 创建组件构造器
2）调用vue.component()方法 注册组件
3）在vue实例的作用范围内 使用组件

/* 创建 组件构造器 /
const Cpn =Vue.extend({
template: <div> <h2>我是标题</h2> <p>我是组件</p> </div>
})
/ 注册组件 */
Vue.component('mycpn',Cpn)

二、简便写法

/* 简便写法 将组件构造器写在注册组件中*/
Vue.component("cpn2", {
template: <div> <h2>我是标题2</h2> <p>我是组件2</p> </div>
})

以上都是全局组件的写法
局部组件的写法为

/* 实例 */
new Vue({
el:'#app',
data:{
message:'我是Vue'
},
components:{
'cpn3':{
template:
<div> <h2>我是标题3</h2> <p>我是组件3</p> </div>
}
}
})

局部组件的另一种写法

/* 局部组件 /
const Cpn4={
template: <div> <h2>我是标题4</h2> <p>我是组件4</p> </div>
}
/ 实例 */
new Vue({
el:'#app',
data:{
message:'我是Vue'
},
components:{
'cpn4':Cpn4
}
})

组件模板写法 （将template分离出去）

const cpn5 ={
template:'#CPN5',
data(){
return {
title:'我是cpn5'
}
}
}

/* 实例 */
new Vue({
el:'#app',
data:{
message:'我是Vue'
},
components:{
cpn5
}
})

vue开发中 每个vue文件就是一个组件
文件格式为