前言
vue的话众所周知是一个渐进式的前端js框架，有两个显著的特点，其中一个就是数据响应式，另外一个就是灵活的组件系统。
组件的划分
组件大致可以分为全局组件，局部组件和单组件引入。
全局组件
//引用方式
<div id="app">
<goal-temp></goal-temp>
</div>
<div id="app2">
//无效app2实例
<goal-temp></goal-temp>
</div>
<script>
//全局组件注册在vue实例上，都可以访问
//必须注册vue实例之前，否则失效
var app=new Vue({
el:'#app2'
})
Vue.compoent('goalTemp',{
template:'<button>全局组件</button>'
})
var app=new Vue({
el:'#app'
})
</script>
局部组件
<div id="app">
<less-temp></less-temp>
</div>
<script>
//局部组件注册在vue内部
var app=new Vue({
el:'#app'，
//注意这里复数组件所以s
components:{
lessTemp:'<button>局部组件</button>'
}
})
单组件引入
//1webpack中或者vue-cli中
//xx.vue模板必须有根元素
<template>
<div>
<button>单文件引入</button>
</div>
</template>
<style>
</style>
<script>
//.vue可以默认可以省略，webpack中可配置
import xx from './xx'
var app=new Vue({
el:'#app',
components:{
xx
}
})
</script>
//2单页面组件
<template id="temp" >
<button>单组件引入</button>
</template>
<div id="app">
</div>
<script>
Vue.component( 'temp',{
template:'#comp',
//方法
methods:{},
//数据data
data() {
return {
}
}
}
})
</script>
