一、定义

组件：应用界面上一个个的区块。 

自定义的HTML元素。

二、创建和注册

• Vue.extend() 扩展，创建组件构造器
• Vue.component()注册组件,2个参数，1为标签，2是组件构造器
• Vue实例范围使用组件

三、全局注册和局部注册

//全局注册Vue.component('my-component', myComponent)        new Vue({            el: '#app'        });//局部注册new Vue({            //只能在#app元素下使用            el: '#app',            components: {                // 2. 将myComponent组件注册到Vue实例下                'my-component' : myComponent            }        });

四、父子组件

父子组件：组件中再定义并使用其他组件。

五、组件注册语法糖

//全局注册Vue.component('my-title1',{    template:'
     
      This is the first component!
     
'})var vm1 = new Vue({    el:'#app1'})var vm2 = new Vue({    el:'#app2',    components:{    // 局部注册，my-title2是标签名称        'my-title2': {            template: '
     
      This is the second component!
     
'        },        // 局部注册，my-title3是标签名称        'my-title3': {            template: '
     
      This is the second component!
     
'        },}})

六、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 : 1} } }) 

八、props

组件实例有自己的作用域，如果想在组件里使用其他组件的数据，可以使用props传递(默认是单向绑定)

普通绑定

var vm = new Vue({    el: '#app',    data: {        name: 'keepfool',        age: 28    },    components: {        'my-component': {            template: '#myComponent',            props: ['myName', 'myAge']//定义props属性        }    }})

     
          //绑定数据    
      
     

双向绑定

使用.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>