vue组件初学习（一）---初学者文档

一、什么是组件？

组件是vue.js最强大的功能之一，它可以扩展HTML元素，封装可以重用的代码.
当然，在更高的层面上，组件是自定义元素，vue.js的编译器为它添加了特殊功能。
在有时候，组建也可以是原生的HTML元素。
简单的说，就是组件是有结构的HTML、有样式的CSS，有交互效果，有行为，信号量可以存数据。
组件可以通过属性开设置。

二、组件的种类：

  ①实现基本功能的基础的组件（最小的元素，即基础组件，如input）
  ②可复用的逻辑组件（业务组件）
  ③页面组件

三、组件的使用

注意：在组件中，有且只能有一个根元素（标签/父元素）
3.1 全局注册，示例代码如下：
//新建一个vue实例对象
<div id="app">
    <child></child>
  </div>
  //引入vue.js文件，路径根据自己文件所在位置而定
  <script src="vue.js" charset="utf-8"></script>
  <script>
    var Child = {
      template: '<div>child</div>',
      }
    }
    Vue.components: {
      Child
    }
    var vm = new Vue({
      el: '#app',
      
    })
  </script>
这样我们就建好了一个简单的父级和子级组件

3.2 局部注册，代码如下：
<div id="app">
    <child></child>
  </div>
  //引入vue.js文件，路径根据自己文件所在位置而定
  <script src="vue.js" charset="utf-8"></script>
  <script>
  //子组件
    var Child = {
      template: '<div>child</div>',
      }
    }
    //根组件
    var vm = new Vue({
      el: '#app',
      components: {
        Child
      }
    })
  </script>

四、组件的嵌套：

<div id="app">
    <child></child>
    <second></second>
    <Third></Third>
  </div>
  <script src="js/vue.js" charset="utf-8"></script>
  <script>
      //二级组件
      var For = {
      template: '<div>for</div>'
    }
      var Five = {
      template: '<div>five</div>'
    }
      var Three = {
      template: '<div>three</div>'
    }
      var Tww = {
      template: '<div>tww</div>'
    }
      var Two = {
      template: '<div>two</div>'
    }
    var Son = {
      template: '<div>son</div>'
    }
    //一级组件
    var Third = {
      template: '<div>child <three></three><for></for><five></five></div>',
      components: {
        Three,
        For,
        Five
      }
    }
    var Second = {
      template: '<div>child <two></two><tww></tww></div>',
      components: {
        Two,
        Tww
      }
    }
    var Child = {
      template: '<div>a <son></son></div>',
      components: {
        Son
      }
    }
    //根组件
    var vm = new Vue({
      el: '#app',
      components: {
        Child,
        Second,
        Third
      }
    })
  </script>

五、在组件中，data必须为函数，否则报错

<div id="app">
    <my-li></my-li>
    <my-li></my-li>
    <my-li></my-li>
</div>
<script src="js/vue.js"></script>
<script>
    var data = { counter: 0 }
    var MyLi = {
        data() {
            return {
                counter: 0
            }
        },
        template: '<button @click="counter++">{{ counter }}</button>'
    }
    var vm = new Vue({
        el: '#app',
        data: {
            msg: ''
        },
        components: {
            MyLi
        }
    })
</script>
在上述这个实例中，，因为三个共享了counter，无论哪个改变三个都改变，所以，我们需要返回一个全新的数据对象来避免这个问题。

六、props

6.1props声明

<div id="app">
    <child message="hello" :my-message="parentMessage"></child>
    <child message="hi"></child> <input type="text" v-model="parentMessage">
  </div>
  <script src="vue.js" charset="utf-8"></script>
  <script>
    var Child = {
      template: '<span>{{ message }} {{ myMessage }}</span>',
      //声明当前组件内部能够接受一个message的属性, 如果是驼峰式命名，在传递参数的时候使用小写
      props: ['message', 'myMessage']
    }
    var vm = new Vue({
      el: '#app',
      data: {
        parentMessage: 'h'
      },
      components: {
        Child
      }
    })
  </script>


6.2 props作为组件的内部的初始状态的方法：
  <div id="app">
    <child :init-counter="counter"></child>
  </div>
  <script src="vue.js" charset="utf-8"></script>
  <script>
    var Child = {
      template: '<div @click="childCounter++">{{ initCounter }} {{ childCounter }}</div>',
      props: ['initCounter'],
      data() { return { childCounter: this.initCounter } }
    };
    var vm = new Vue({
      el: '#app',
      data: { counter: 0 },
      components: { Child }
    })
  </script>
  
6.3props接受后用计算属性转换的方法：
     <div id="app">
        <child :size="parentSize"></child>
      </div>
      <script src="vue.js" charset="utf-8"></script>
      <script>
        var Child = {
          template: '<div>{{ size }} {{ normalSize }}</div>',
          props: ['size'],
          computed: {
            normalSize() {
              return this.size.trim().toLowerCase();
            }
          }
        }
        var vm = new Vue({
          el: '#app',
          data: {
            parentSize: ' THREE '
          },
          components: {
            Child
          }
        })
      </script>
  

七、props的验证：

当传入的数据不符合要求时，在开发版本的控制台会报错，对初级开发组件的人很有用，
验证的类型：String Number Boolean Function Object Array Symbol，需要注意的是 prop 会
在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或
 methods 等实例属性还无法使用。

    <div id="app">
        <child :pa="pa" :pb="pb" :pc="pc" :pd="pd" :pe="pe" :pf="pf"></child>
      </div>
      <script src="vue.js" charset="utf-8"></script>
      <script>
        var Child = {
          template: '<div>{{ pa }} {{ pb }} {{ pc }} {{ pd }} {{ pe }} {{ pf }}</div>',
          props: {
            pa: Number,
            pb: [String, Number],
            pc: {
              type: Number,
              required: true
            },
            pd: {
              type: Number,
              default: 100
            },
            pe: {
              type: Object,
              default: function() {
                return {
                  hello: 'world'
                }
              }
            },
            pf: {
              type: Number,
              validator: function(v) {
                return v > 100
              }
            }
          }
        }
        var vm = new Vue({
          el: '#app',
          data: {
            pa: 2017,
            pb: "string",
            pc: 2,
            pd: 1113,
            pe: {},
            pf: 120
          },
          components: {
            Child
          }
        })
      </script>

从这些简单的例子我们可以看出来。vue之所以这么火不是没有道理的，把原本复杂的前端页面变得简单了许多，这样，在开发过程中就可以少走很多弯路，但是呢，由于本人初学，暂时就学了这么多，以后会继续学习