vue组件简单介绍与使用

简单记录一下vue的使用方式和大致流程，参照官方栗子。

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

vue组件使用主要分为3部分，声明组件模板、注册组件、创建组件实例*

template

 <!-- component template -->
  <script type="text/x-template" id="grid-template">
      <table>
        <thead>
          <tr>
            <th v-for="key in columns"
              @click="sortBy(key)"
              :class="{active: sortKey == key}">
              {{key | capitalize}}
              <span class="arrow"
                :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
              </span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for=" entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]">
            <td v-for="key in columns">
              {{entry[key]}}
            </td>
          </tr>
        </tbody>
      </table>
    </script>

组件注册

对于template初始状态是一个script中的html，加上type=”text/x-template”特殊的type，然后根据id和type过滤 0获取script元素获取其中的html，获取到模板内容

// 注册组件
//关于组件中的this，执行Vue.component会根据组件名来创建的一个function对象,然后然后用原型方式继承Vue对象。
//所以这里的demo-grid会创建一个DemoGrid对象，,this指向DemoGrid对象
Vue.component('demo-grid', {
 //组件模板 ，可以使script形式，也可以使用html
  template: '#grid-template',
  //是否替换原标签
  replace: true,
  //参数定义
  //data: Array中data为参数名称，Array为参数类型验证，支持自定义函数验证
  //原生构造器String，Number，Boolean，Function，Object，Array
  props: {
    data: Array,
    columns: Array,
    filterKey: String
  },
  //数据初始化
  data: function () {
    var sortOrders = {}
    this.columns.forEach(function (key) {
      sortOrders[key] = 1
    })
    return {
      sortKey: '',
      sortOrders: sortOrders
    }
  },
  //组件模板中事件声明
  methods: {
    sortBy: function (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }
  }
})

全局注册组件demo-grid，传入一个选项对象（自动调用 Vue.extend）
Vue.component(‘demo-grid’, { /* … */ })

创建实例

html部分

<div id="demo">
      <form id="search">
        Search <input name="query" v-model="searchQuery">
      </form>
      //组件标签，注册过的demo-grid组件将会在这个地方渲染
      //:data="gridData"为默认单向绑定
      //:data.sync="gridData"双向绑定
      //:data.once="gridData"单次绑定
      <demo-grid
        :data="gridData"
        :columns="gridColumns"
        :filter-key="searchQuery">
      </demo-grid>
    </div>

js部分

//创建实例
var demo = new Vue({
//指定根元素，根元素下面的所有被声明的组件标签都会执行组件化操作
  el: '#demo',
  //传参给组件，如果组件有参数声明；没有则忽略，多余的参数传递不会报错
  data: {
    searchQuery: '',
    gridColumns: ['name', 'power'],
    gridData: [
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 }
    ]
  }
})