一、定义
组件：应用界面上一个个的区块。
自定义的HTML元素。
二、创建和注册
- Vue.extend() 扩展，创建组件构造器
- Vue.component()注册组件,2个参数，1为标签，2是组件构造器
- Vue实例范围使用组件
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- . #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script> // 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
}) // 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
Vue.component('my-component', myComponent) new Vue({
el: '#app'
}); </script>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="app1">
<my-component></my-component>
</div> <div id="app2">
<my-component></my-component>
</div> <!--该组件不会被渲染-->
<my-component></my-component>
</body>
<script src="js/vue.js"></script>
<script>
var myComponent = Vue.extend({
template: '<div>This is a component!</div>'
}) Vue.component('my-component', myComponent) var app1 = new Vue({
el: '#app1'
}); var app2 = new Vue({
el: '#app2'
})
</script>
</html>
三、全局注册和局部注册
//全局注册
Vue.component('my-component', myComponent) new Vue({
el: '#app'
});
//局部注册
new Vue({
//只能在#app元素下使用
el: '#app',
components: {
// 2. 将myComponent组件注册到Vue实例下
'my-component' : myComponent
}
});
四、父子组件
父子组件：组件中再定义并使用其他组件。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<parent-component>
</parent-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//子组件构造器
var Child = Vue.extend({
template: '<p>This is a child component!</p>'
})
//父组件构造器
var Parent = Vue.extend({
// 在Parent组件内使用<child-component>标签
template :'<p>This is a Parent component</p><child-component></child-component>', //引用子组件
components: {
// 局部注册Child组件，该组件只能在Parent组件内使用
'child-component': Child
}
}) // 全局注册Parent父组件
Vue.component('parent-component', Parent) new Vue({
el: '#app'
}) </script>
</html>
五、组件注册语法糖
//全局注册
Vue.component('my-title1',{
template:'<div>This is the first component!</div>'
})
var vm1 = new Vue({
el:'#app1'
}) var vm2 = new Vue({
el:'#app2',
components:{
// 局部注册，my-title2是标签名称
'my-title2': {
template: '<div>This is the second component!</div>'
},
// 局部注册，my-title3是标签名称
'my-title3': {
template: '<div>This is the second component!</div>'
},
}
})
六、script和template标签
script
使用script标签时，type为text/x-template，是让浏览器忽略标签内容
template
不需要指定type，从用法上来看，就像是script的简化版。 
七、el和data选项
el
只由new创建的实例中使用
提供已存在的DOM元素为Vue实例的挂载目标。决定其作用域。
data
只接受function。
实例的数据对象，Vue会将data属性转为getter/setter，让data响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
Vue.component('my-component', { data: function(){ return {a : } } })
八、props
组件实例有自己的作用域，如果想在组件里使用其他组件的数据，可以使用props传递(默认是单向绑定)
普通绑定
var vm = new Vue({
el: '#app',
data: {
name: 'keepfool',
age:
},
components: {
'my-component': {
template: '#myComponent',
props: ['myName', 'myAge']//定义props属性
}
}
})
<template id="myComponent">
<table>//表格
<tr>//一行
<th colspan="">//colspan代表占几个格子
//子组件数据
</th>//标题
</tr>
<tr>//
<td>my name</td>
<td>{{ myName }}</td>//获取数据
</tr>
<tr>
<td>my age</td>
<td>{{ myAge }}</td>//获取数据
</tr>
</table>
</template>
<div id="app">
//绑定数据
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
双向绑定
使用.sync双向绑定，修改时数据会回传
<my-component v-bind:my-name.sync="name" v-bind:my-age.sync="age"></my-component>
单次绑定
使用.once单次绑定，关系建立后数据不会同步。
<my-component v-bind:my-name.once="name" v-bind:my-age.once="age"></my-component>