Vue 组件开发
程序员文章站
2022-03-26 13:24:53
将页面拆分为多个组件，简化了页面开发，方便维护，组件也可以复用。 组件的类型 通用组件，比如表单、弹窗、菜单栏、分页组件等 业务组件，实现某一业务的组件，比如抽奖组件 页面组件，也叫做单页，一个页面就是一个组件，只完成功能，不复用 组件开发流程：声明、注册、使用 demo 组件使用流程
将页面拆分为多个组件，简化了页面开发，方便维护，组件也可以复用。
组件的类型
- 通用组件，比如表单、弹窗、菜单栏、分页组件等
- 业务组件，实现某一业务的组件，比如抽奖组件
- 页面组件，也叫做单页，一个页面就是一个组件，只完成功能，不复用
组件开发流程：声明、注册、使用
demo 组件使用流程
<div id="app"></div>
<script>
var myheader={ //声明一个组件
template:'<div>this is the header area</div>'
}
var mybody={
template:'<div>this is the body area</div>'
}
var myfooter={
template:'<div>this is the footer area</div>'
}
new vue({
el:'#app',
components:{ //注册组件
myheader,
mybody,
myfooter
},
template:'<div><myheader></myheader><mybody></mybody><myfooter></myfooter></div>' //使用组件
});
</script>
声明是全局声明，但需要在每一个使用vue对象中进行注册。
使用组件有2种方式
- <myheader></myheader> 直接以变量名作为标签名
- <my-header></my-header> 单词都转换为全小写，-连接
声明组件时是用了语法糖的
// 原来的写法
var myheader=vue.extend({
template:'<div>this is the header area</div>'
})
// 语法糖
var myheader={
template:'<div>this is the header area</div>'
}
效果都一样，但使用语法糖明显要简便些
组件声明、注册的另一种方式
// 声明+注册一个组件
vue.component('myheader',{
template:'<div>this is the header area</div>'
})
vue.component('mybody',{
template:'<div>this is the body area</div>'
})
vue.component('myfooter',{
template:'<div>this is the footer area</div>'
})
new vue({
el:'#app',
template:'<div><my-header></my-header><my-body></my-body><my-footer></my-footer></div>' //使用组件
});
声明、注册都是全局的，在vue对象中可以直接使用
上一篇： JavaScript中的apply()、call()、bind()
下一篇： Glide的使用解析