Vue 组件化

组件化和模块化的区别：

　　组件化是从UI界面的角度出发，方便分层开发，保证每个功能模块的职能单一

　　模块化是从逻辑的角度出发，方便Ui的组件的重用

//组件创建方式
1.
const com1 = Vue.extned({
    template:"<h1>djskdsjkds</h1>",
})
Vue.component("templateName",com1);
使用　<template-name></template-name> //如果templateName是驼峰的就用-连接，如果都是小写的，就正常写就可

2.
Vue.component(“templateName”,{
　　template:"<span>ddddd</span>"
})
使用：
　　<template-name> //组件中只能有一个子元素
　　　　<div> 
　　　　　　//code
　　　　</div>
　　</template-name>
3.
//在指定的Vue实例外写，组件中要显示的内容
<template id="temp">
　　<div> 
　　　　//code

      //组件中只能有一个子元素

    </div>
</template>
//在指定的VUe实例中写，

<template-name>

</template-name>

Vue,component("templateName",{
　　template:"#temp",
})
4.私有组件
new Vue({

　　el:"#app",
　　data:{},
　　methods:{},
　　filters:{},//自定义过滤器
　　direction:{}，//自定义组件
　　components:{
　　　　templateName:{
　　　　　　template:"xxx　xxxxx"　　　
　　　　}
　　}
})
//只能在id为app的节点中被调用