001_XXXX(h3)
-
创建组件的两种方式
var Header = { template:‘模板’ , data是一个函数,methods:功能,components:子组件们 }//局部声明
Vue.component(‘组件名’,组件对象);//全局注册 等于注册加声明了
-
组件类型
- 通用组件(例如表单、弹窗、布局类等)
- 业务组件(抽奖、机器分类)
- 页面组件(单页面开发程序的每个页面的都是一个组件、只完成功能、不复用)
-
组件开发三步曲:声明、注册、使用
-
源代码
<html>
<head>
<title>组件化开发</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
/* 创建组件的第一种方式第一步:局部声明 */
var MyHeader_dl={
template:`
<div>我是头部</div>
`,
}
var My_dlBody_dl=Vue.extend({
template:`
<div>我是身体</div>
`
})
//这个是语法糖,与上面创建等价
// var My_dlBody_dl={
// template:`
// <div>我是身体</div>
// `
// }
/* 创建组件的第二种方式:全局注册 */
Vue.component('MyFooter',{
template:`
<div>我是尾部</div>
`
})
new Vue({
el:'#app',
/* 创建组件的第一种方式第二步:注册组件 */
components:{
MyHeader_dl,
My_dlBody_dl
},
/* ! 组件名和标签名的匹配规则
MyHeader_dl ---> my-header_dl
My_dlBody_dl ---> my_dl-body_dl
*/
template:`
<div>
<my-header_dl></my-header_dl>
<my_dl-body_dl></my_dl-body_dl>
<my-footer></my-footer>
</div>
`,
data(){
return{}
},
})
</script>
</body>
</html>
- 浏览器界面