（题外话，看了一下vue的技术文档，初写了几个例子程序，我竟深深喜欢上了vue）
（ 用vue语法写好的html，直接拖到浏览器后就可以运行）
一、例程简介：在页面某div上显示自定义的组件信息（这里是思路，详细代码看https://www.cnblogs.com/zhangxj/p/11283918.html）
二、使用过程：
1.注册（定义）组件：（作用：接收传入数据并显示出来，但具体显示的位置在创建vue实例中决定）
Vue.component({
'test-component', // 组件名，在页面可以通过<test-component></test-component>标签来引用，命名建议：字母全小写且必须包含一个连字符。
{
props:['mydata'],
template:"<li>{{mydata.text}}</li>"
}
})
1). 定义了一个接口props['mydata'],mydata就是传入参数，使用这个组件时，只要给mydata绑定对象后，就可以在组件内部使用了；
2). 定义template，这里可以显示所传入的参数mydata：<li>{{mydata.text}}</li> .(注：mydata是一个对象，并且这个对象必须包含text属性)。
2.创建vue实例，在某div上显示自定义的组件：
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：
var vm =new Vue({
// 选项
el:'#div-id', // 某div的id值
data:{
// 给页面或组件准备数据
message:'Hello',
itemList:[
{ id:100 , text :"this is my item1"} ,
{ id:201 , text :"this is my item2"} ,
{ id:300 , text :"this is my item3"} ,
]
}
})
3. 写页面html代码：
<div id='div-id'>
{{message}}
<test-component
v-for='item in itemList'
v-bind:mydata='item'
v-bind:key='item.id'
></test-component>
</div>
OK,这里自定义组件和使用介绍完毕。
原理：vue实例给组件准备数据并在页面合适的位置传给组件。