Vue学习（一）

基于学习weex的需求，要将Vue.js的基础进行学习，并完成一个简单的图书馆上下架系统。

初探

• 数据绑定
• 组件化

数据绑定

数据绑定

组件化

样例：在父组件中注册

• 使用Vue.component()

1、使用Vue.component()进行模块定义

Vue.component('component1',{
    props:['message'],
    template: '<p>{{message}}</p>'
});

该子模块中定义了一个属性：message,并定义了该模块如何进行渲染。

2、使用模块和模块属性

<component1 message='Hello,Component'></component1>

• 在父组件中注册子component

1、需要在components属性中配置定义的子component。

new Vue({
      el: '#library',
      data: {
          library_title: '图书上下架系统'
         },
      components: {
          'library-title': component_library_title
         }
   })

2、定义子component

var component_library_title = {
    props: ['text'],
        template: '<div>{{text}}</div>'
    }

这里我们在子componentlibrary-title中定义了该component的属性（成员）：text,并且你可以在子component中使用该属性。

3、对子component中的属性进行数据绑定（绑定父component的数据）

 
<library-title v-bind:text='library_title'></library-title>

在官方的文档中指出：这种数据流的绑定是单向的（从父到子，而子组件中props的变化无法反映到父的data中）