vue.js表格组件开发的实例详解
前言
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
组件开发的基础
组件可以扩展 HTML 元素，封装可重用的代码。我理解为功能模块的模板吧。
对于vue来说，组件是这个样子的，我们在html里面写
<div id="example"> <my-ponent></my-ponent> </div>edx
然后就出来
<div id="example"> <div>A custom ponent!</div> </div>
代码 <div>A custom ponent!</div>我们只要写一遍就行了 。
所以我们需要定义它，把 my-ponent的标签和代码关联起来，所以我们要定义它
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom ponent!</div>'
})
定义了之后，我们要让页面能够渲染它，让Vue知道它的存在
// 注册
Vue.ponent('my-ponent', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
以上，是官网一个非常简单的例子 ，其实觉得和一个function的封装也差不多，定义，引入，然后执行。
然后一个组件可以引用别的组件的东西，有点像函数的互相调用啊。
var Child = Vue.extend({ / ... / })
var Parent = Vue.extend({
template: '...',
ponents: {
// <my-ponent> 只能用在父组件模板内
'my-ponent': Child
}
})
一个表格组件的实例
这是官网的例子
这个是一个可以排序的表格的例子。我们从头开始来制作一个可以排序的表格。
基本结构
分成两个部分，一个是搜索框，一个是表格本身，我们可以得到这样的结构
<div id="demo"> <form id="search"> Search <input name="query"> </form> <table> <thead> <tr> <th>name</th> <th>power</th> </tr> </thead> <tbody> <tr> <td>Jack Chan</td> <td>7000</td> </tr> </tbody> </table> </div>
显示效果
加上基本的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;
-user-select: none;
}
td {
background-color: #f9f9f9;
}
th, td {
min-width: 120px;
padding: 10px 20px;
}
#search {
margin-bottom: 10px;
}
显示效果如下，
提取组件
我们是想要让表格成为单独的组件，所以我们定义一个叫做 demo-grid的组件，用它来生成表格
<div id="demo"> <form id="search"> Search <input name="query" > </form> <demo-grid> </demo-grid> </div>
代码里面关于表格的那部分给放到组件模板里面，我们定义组件。也就是用script来定义,
<script type="text/x-template" id="grid-template"> <table> <thead> <tr> <th>name</th> <th>power</th> </tr> </thead> <tbody> <tr> <td>Jack Chan</td> <td>7000</td> </tr> </tbody> </table> </script>
定义完了之后我们要在给Vue注册组件模块，然后进行Vue的渲染
Vue.ponent('demo-grid',{
template:"#grid-template",
});
var demo = new Vue({
el:'#demo'
})
然后的效果是一样的，这个时候并没有数据流。
组件数据流
我们要让表格知道表格的头部和表格的内容，也就是有一个gridColumns和gridData，这个数据最开始放在Vue的Data里面
// bootstrap the demo
var demo = new Vue({
el: '#demo',
data: {
gridColumns: ['name', 'power'],
gridData: [
{ name: 'Chuck Norris', power: Infinity },
{ name: 'Bruce Lee', power: 9000 },
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 }
]
}
})
然后我们的组件也要接受这个数据,这里我们通过类似属性的形式给组件模板传入数据，
<demo-grid :data="gridData" :columns="gridColumns"> </demo-grid>
然后我们在组件里面把相应的数据继承下来。
Vue.ponent('demo-grid',{
template:"#grid-template",
props: {
data: Array,
columns: Array
}
});
然后在模板里面替换掉
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in columns">{{key}}</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in data">
<td v-for="key in columns">{{entry[key]}}</td>
</tr>
</tbody>
</table>
</script>
效果如下
搜索功能增加
这个时候，我们想加入一个交互，也就是在搜索框增加关键词的时候，表格能够相应地变化。
我们要绑定搜索框的模型,也就是用searchQuery来绑定Input
<form id="search"> Search <input name="query" v-model="searchQuery"> </form>
在Vue里面增加data的初始化
var demo = new Vue({
el: '#demo',
data: {
searchQuery: '',
...
})
，在组件模板里面也进行参数传入
<demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"> </demo-grid>
组件的定义里面要继承模板的数据,也就是在模板里面是filter-key，注意要转化驼峰写法
Vue.ponent('demo-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
}
})
这个时候，我们的模板里面要过滤符合filterKey的数据,这里就用到了过滤器，vue提供了一个叫做filterBy的过滤器。|与过滤器，第一个为过滤器的名字，后面的是参数，| filterBy filterKey使用的就是filterBy的过滤器，参数是filterKey
<tr v-for="
entry in data
| filterBy filterKey>
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
效果如下，我们这样就有了一个 能够过滤的表格
表格排序
这部分逻辑比前面稍微复杂一点点。我们给表格加一个三角形，三角形有两种，一种是正序的，一种是逆序的，我们用span来作为三角形的容器
<th v-for="key in columns"
@click="sortBy(key)"
:class="{active: sortKey == key}">
{{key | capitalize}}
<span class="arrow">
</span>
</th>
三角形的样式有两种，上升的和下降的
.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-: 4px solid #fff;
}
dsc的效果如下
我们希望能够在不同的状态里面切换，所以我们选择在组件里面有数据存储排序的状态信息，用一个sortOrders的对象来存储排序信息 ，用一个sortKey来表示当前用来排序的键，我们设置为name
// register the grid ponent
Vue.ponent('demo-grid', {
template: '#grid-template',
...
data: function () {
var sortOrders = {}
this.columns.forEach(function (key) {
sortOrders[key] = 1
})
return {
sortKey: 'name',
sortOrders: sortOrders
}
}
然后使用orderBy来排序
<tbody>
<tr v-for="
entry in data
| filterBy filterKey
| orderBy sortKey sortOrders[sortKey]">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
现在也就是根据name升序排序，所以我们看到表格的结果如下
增加交互
我们希望能够通过点击表格头部来自动升序降序,所以添加鼠标事件，把span的样式和sortOrders[key]的值相关联,增加active的样式
<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>
相关active的样式如下
th.active .arrow {
opacity: 1;
}
对于鼠标事件，我们定义在表格内部，也就是把sortKey定位当前活跃的元素，改变sortOrders[key]的值
// register the grid ponent
Vue.ponent('demo-grid', {
template: '#grid-template',
props: {
...
},
data: function () {
...
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] -1
}
}
});
以上就是关于vue.js组件开发的全部内容了，希望这篇文章对大家学习或者使用vue.js能有一定的帮助，如果有疑问大家可以留言交流。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程