vue组件入门上（组件引入）

前言

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>