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',
//传参给组件，
4000
如果组件有参数声明；没有则忽略，多余的参数传递不会报错
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 }
]
}
})