vue组件封装过程

为什么要封装组件？

前端框架的趋势，越来全栈化发展。框架的核心提供高性能的解耦，低耦合的功能。

通用组件，也就是解耦的目的是为了让代码看起来更加的清晰，维护更加方便，功能更加明确。

自定义组件data必须是个函数，主要是为了防止组件与组件之间 声明的变量相互影响。

<div >

<v-header></v-header>

<v-footer></v-footer>

</div>

---第一种---

<template >

<div>

<p>{{msg}}:<input /></p>

</div>

</template >

---第二种---

<script type="x-template" >

<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 >

<div>

<p>hello world</p>

</div>

</template >

<script >

export defaule {

data:function(){

return {

}

}

}

</script >

scoped只适用于当前组件