VUE实例学习--表格(grid)检索
下面的实例是 源码中的表格控件实例;
源码目录结构
一、目录结构
首先来"一览众山小",看下整体的的目录结构。(可以跳过这里往下看)
|— benchmarks 基准测试,与其他竞品做比较
|— dist 打包之后文件所在位置,包括完整版本,运行时版本版本,主要关注下vue.js
|— examples 部分示例
|— flow 因为Vue使用flow来进行静态类型检查,这里定义了声明了一些静态类型
|— packages vue还可以分别生成其它的npm包
|— scripts
|— src 主要源码所在位置,需要重点关注
|— compiler 模板解析的相关文件
|—codegen 根据ast生成render函数
|—directives 通用生成render函数之前需要处理的指令
|—parser 模板解析
|— core 核心代码
|— components 全局的组件,这里只有keep-alive
|— global-api 全局方法相关,也就是添加在Vue对象上的方法,比如Vue.use,Vue.extend,Vue.mixin等
|— instance 初始化相关,包括实例方法,生命周期,事件等
|— observer 双向数据绑定相关文件
|— util 工具方法
|— vdom 虚拟dom相关
|—index.js,入口文件,源码从这看起
|— platforms 平台相关的内容
|— web web端独有文件
|— compiler 编译阶段需要处理的指令和模块
|— runtime 运行阶段需要处理的组件、指令和模块
|— server 服务端渲染相关
|— util 工具库
|— weex weex端独有文件
|— server 服务端渲染相关
|— sfc
|— shared 共享的工具方法
|— test 测试用例
实例目录结构
实例入口index.html文件解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue.js grid component example</title>
<link rel="stylesheet" href="style.css">
<!-- Delete ".min" for console warnings in development -->
<script src="../../dist/vue.js"></script>
</head>
<body>
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table v-if="filteredData.length">
<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 filteredData">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
<p v-else>No matches found.</p>
</script>
<!-- demo root element -->
<div id="demo">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery">
</demo-grid>
</div>
<script src="grid.js"></script>
</body>
</html>
- type="text/x-template"的script标签下定义了表格组件demo-grid模板;
- 定义了id="demo"的div元素,元素下面嵌入了form表单和demo-grid表格组件
- src="grid.js"的script标签定义了demo-grid组件和初始化了 el属性为 '#demo’的VUE实例;
grid.js为表格组件内容解析
// register the grid component
Vue.component('demo-grid', {
template: '#grid-template',
replace: true,
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
computed: {
filteredData: function () {
var sortKey = this.sortKey
var filterKey = this.filterKey && this.filterKey.toLowerCase()
var order = this.sortOrders[sortKey] || 1
var data = this.data
if (filterKey) {
data = data.filter(function (row) {
return Object.keys(row).some(function (key) {
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
})
})
}
if (sortKey) {
data = data.slice().sort(function (a, b) {
a = a[sortKey]
b = b[sortKey]
return (a === b ? 0 : a > b ? 1 : -1) * order
})
}
return data
}
},
filters: {
capitalize: function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
}
}
})
// bootstrap the demo
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 }
]
}
})
组件相关:
1.全局注册了一个demo-grid的VUE组件;
2.定义了组件的props属性和vue实例的属性进行了关联;
关联代码在index.html中,如下:
<demo-grid
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery">
</demo-grid>
3.定义了组件的计算(compute)属性,计算属性是根据表单输入值过滤的表格数据列表;
4.定义了组件的过滤属性capitalize;本例中,过滤属性的作用是把表格的列头值的第一个字母转为大写字母;
VUE实例相关:
1.定义了表格的列头(gridColumns)和表格的数据(gridData);
style.css样式文件内容解析
body {
font-family: Helvetica Neue, Arial, sans-serif;
font-size: 14px;
color: #444;
}
table {
border: 2px solid #42b983;
border-radius: 3px;
background-color: #fff;
}
th {
background-color: #42b983;
color: rgba(255,255,255,0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
td {
background-color: #f9f9f9;
}
th, td {
min-width: 120px;
padding: 10px 20px;
}
th.active {
color: #fff;
}
th.active .arrow {
opacity: 1;
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
运行结果图: