VUE入门-组件化开发
摘要: vue的组件化，一般分为两类，局部注册组件与全局注册组件. 组件的使用一般包含三个步骤：组件申明，注册，使用。 但作为全局组件，在申明的时候就注册了，所以在使用的时候并不需要显示的申明引用。但局部的组件，必须在components中显示引用
vue的组件化，一般分为两类，局部注册组件与全局注册组件. 组件的使用一般包含三个步骤：组件申明，注册，使用。 但作为全局组件，在申明的时候就注册了，所以在使用的时候并不需要显示的申明引用。但局部的组件，必须在components中显示引用。
局部组件通用的申明方式：
var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }全局组件通用的申明方式:
Vue.component('组件名',组件对象);下面是一个例子, 声明了全局组件，也有局部组件:
<!DOCTYPE html>
<html>
<head>
<script src="vue.js"></script>
<style>
#mybody, #myfooter, #myheader {
border:1px salmon solid;
margin:10px;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
// local component.
var MyHeader = {
template:`
<div id="myheader">I am header</div>
`,
};
var MyBody = {
template:`
<div id="mybody">I am main content</div>
`,
};
// global component
Vue.component('MyFooter',{
template:`
<div id="myfooter">I am footer</div>
`
})
new Vue({
el:"#app",
template:`
<div>
<my-header></my-header>
<my-body></my-body>
<my-footer></my-footer>
</div>
`,
data:function(){
return {
}
},
// local component only.
components:{
MyHeader,MyBody
}
})
</script>
</body>
</html>
