vuejs入门-组件初识（四）

官方的文档说的很清楚了，我就来点直白一些的话来说*.vue组件
1.组件你可以看成是自定义标签的实现；
2.组件就是为了更好的代码或者说功能复用；
3.组件还可以是一整个页面[vuejs里页面也是组件，本系列路由第一篇就是]；

我们写一个最简单的组件：数据表格吧，这里数据暂时写死，后面我们再通过vue-resource来获取数据吧。[视图的研发流程一般都是从死到活的，哈哈]

先看看怎么定义一个自己的组件以及如何复用
1.定义DataTable.vue：
<template>
<div>
<span>第1个子页面-用户列表页</span>
<table>
<tr><th>编号</th><th>名字</th><th>邮箱</th><th>手机号</th></tr>
<tr v-for="user in users" ><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.email}}</td><td>{{user.mobile}}</td></tr>
</table>
</div>
</template>

<script>
export default {
data () {
return {
users:[
{id:1, name:'刘备', emial:'lbei@163.com', mobile:'18989899991'},
{id:2, name:'关羽', emial:'gyu@163.com', mobile:'18989899992'},
{id:3, name:'张飞', emial:'zhfei@163.com', mobile:'18989899993'},
{id:4, name:'曹操', emial:'ccao@163.com', mobile:'18889899991'},
{id:5, name:'曹丕', emial:'cpi@163.com', mobile:'18889899992'},
{id:6, name:'曹冲', emial:'cchong@163.com', mobile:'18889899993'}
],
}
}
}
</script>

<style scoped>
span{
font-weight: normal;
color:red
}
</style>

2.复用DataTable.vue：
当你想在任何一个页面使用这个组件的时候，那么导入这个组件，然后使用即可:
<template>
<DataTable/>
<DataTable/>
<DataTable/>
<template>
<script>
import DataTable from 'DataTable'

export default {
components:{DataTable}
}
</script>

说明：
export default {
components:{DataTable}
}
components:{DataTable}的写法其实是简写于：components:{DataTable:DataTable}, 前面含义是别名，后面是导入的组件名；
你可以这么写：
<template>
<vtable/>
<vtable/>
<vtable/>
<template>
export default {
components:{vtable:DataTable}
}

3.本篇还有一个说明：就是使用了model数据绑定以及v-for语法；关于语法我这里就不说了，既然要学，语法肯定是基础；有了入门第一篇的认识，就能把官方文档里的语法学习及相关案例可以跑ok了【官方文档真的是最赞的了】。随后等我vue2的语法xmind图整理好了会发出来给大家。但是这个东西明说呢，你至少要知道有什么，能做什么；然后哪怕代码不会再查文档，而不是等着别人分享东西，就是分享，也还是需要自己去走一遍的。

最后说个题外话：
Vue.component('simple-counter', {
..组件定义的代码
})
和*.vue文件中的
...
<script>
export default {
..组件定义的代码
}
</script>
...

对应即可，这样你可以把官方文档中传统模式的测试小例子写成*.vue的组件进行测试【本系列第一篇其实就是这个意思[找到一种代码对应关系，然后一通百通]】，因为是小白入门篇，我直接就用也许不严谨但是比较直白一点的语言告诉小白，可以这么干，然后你就可以循序渐进学到更多，等以后，就知道为什么会这样了。

组件定义的代码块主要包含了：data，computed，methods, 然后就是周期回调如：created,mounted。相信学了官方文档的童鞋不用多说什么了。