vue 组件开发

vue 提供了组件开发模型，使开发大中型web应用更加的方便。

vue的组件的概念包括components、template，components用来注册组件，template用来定义模板，可以进行全局注册组件，也可以进行局部注册。

现定义一个简单组件如下：

var template1={

template:'<div>hello</div>'

}

使用Vue对组件进行全局注册

Vue.components（template1）;

全局注册注册简单、方便，缺点是加载的东西多，当组件增多时会拖累系统的速度。这种简单的组件对于比较简单的场景是很快速的，但是当组件页面较大时，就不是很方便了，换行难忙不支持js和css。因此需要使用单文件组件（后缀为vue）。

组件包含三个区域，template（用于编写页面，最外层只能一个大标签），script（编写js相关代码），css（编写template里样式相关）。

test.vue

<template>

  <div id="app">

  <h1 id="msg">{{message}}</h1>

  <h2 id="hh">test....{{name}}</h2>

  </div>

</template>

<script>

  export default {

    name:'test',

    props:

    {

      message:String,

      name:{

        type:String,

        default:'sky'

      }

    }

  }

</script>

<style>

  #msg{

    color: red;

    text-align: center;

  }

</style>

如上，{{message}}是vue的变量，exports部分name为导出的组件名称，props为属性相关。

b.vue引用test.vue

<template >

<test></test>

</template>

<script>

import test from './test.vue'

exports default {

name:'b',

components:{

test

}

}

</script>