为什么要封装组件？
前端框架的趋势，越来全栈化发展。框架的核心提供高性能的解耦，低耦合的功能。
通用组件，也就是解耦的目的是为了让代码看起来更加的清晰，维护更加方便，功能更加明确。
自定义组件data必须是个函数，主要是为了防止组件与组件之间 声明的变量相互影响。
<div id="demo">
<v-header></v-header>
<v-footer></v-footer>
</div>
---第一种---
<template id="header">
<div>
<p>{{msg}}:<input /></p>
</div>
</template >
---第二种---
<script type="x-template" id="footer">
<div>
这是组件底部
</div>
</script >
<script>
var Header = {
template:"#header",
data:function(){
return {
}
}
}
var Footer = {
template:"#footer"
}
var vm = new Vue({
el:"#demo",
components:{
'v-header':Header ,
'v-footer':Footer
}
})
</script >
vue-cli 模板引擎
<template id="demo1">
<div>
<p>hello world</p>
</div>
</template >
<script >
export defaule {
data:function(){
return {
}
}
}
</script >
scoped只适用于当前组件