-
创建组件的两种方式
-
var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }//局部声明
Vue.component('组件名',组件对象);//全局注册 等于注册加声明了
-
组件类型
- 通用组件（例如表单、弹窗、布局类等)
- 业务组件（抽奖、机器分类）
- 页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）
组件开发三步曲：声明、注册、使用
代码
<!DOCTYPE html>
<html>
<head>
<title>组件化开发</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var MyHeader={
template:`
<div>我是头部</div>
`,
}
var MyBody=Vue.extend({
template:`
<div>我是身体</div>
`
})
//这个是语法糖
// var MyBody={
// template:`
// <div>我是身体</div>
// `
// }
Vue.component('MyFooter',{
template:`
<div>我是尾部</div>
`
})
new Vue({
el:'#app',
//注册组件
components:{
MyHeader,
MyBody
},
template:`
<div>
<my-header></my-header>
<my-body></my-body>
<my-footer></my-footer>
</div>
`,
data(){
return{}
},
})
</script>
</body>
</html>