vue.js表格组件开发的实例详解

前言

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

组件开发的基础

组件可以扩展 HTML 元素,封装可重用的代码。我理解为功能模块的模板吧。

对于vue来说,组件是这个样子的,我们在html里面写

<div id="example">
 <my-component></my-component>
</div>edx

然后就出来

<div id="example">
<div>A custom component!</div>
</div>

代码 <div>A custom component!</div>我们只要写一遍就行了 。

所以我们需要定义它,把 my-component的标签和代码关联起来,所以我们要定义它

// 定义
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
})

定义了之后,我们要让页面能够渲染它,让Vue知道它的存在

// 注册
 Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
 el: '#example'
})

以上,是官网一个非常简单的例子 ,其实觉得和一个function的封装也差不多,定义,引入,然后执行。

然后一个组件可以引用别的组件的东西,有点像函数的互相调用啊。

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
 template: '...',
 components: {
 // <my-component> 只能用在父组件模板内
 'my-component': 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.component('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.component('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.component('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-top: 4px solid #fff;
}

dsc的效果如下

我们希望能够在不同的状态里面切换,所以我们选择在组件里面有数据存储排序的状态信息,用一个sortOrders的对象来存储排序信息 ,同时用一个sortKey来表示当前用来排序的键,我们设置为name

 // register the grid component
 Vue.component('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 component
 Vue.component('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能有一定的帮助,如果有疑问大家可以留言交流。

时间: 2016-10-11

强大Vue.js组件浅析

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

Vuejs第九篇之组件作用域及props数据传递实例详解

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

Vue.js组件tabs实现选项卡切换效果

今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

vue组件学习教程

在学习vue时,组件学习比较吃力,尤其是组件间的通信,所以总结一下,官方文档的组件部分. 注册组件 全局组件 语法如下,组件模板需要使用一个根标签包裹起来.data必须是一个方法 Vue.component('component-name',{ template:'<div><h1>标题</h1><span>作者信息</span></div>', data(){ return{ message:'组件的属性' } }, methods

Vue.js路由组件vue-router使用方法详解

使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

vue如何引用其他组件(css和js)

1.vuejs组件之间的调用components 注意:报错Do not use built-in or reserved HTML elements as component id: 修改组件的名字,例如不能使用address为组件名字 组件名字不要使用内置的或保留HTML元素为组件id, App.vue是一个入口,vue必须注册才能使用 2.vue引入外部的css,放在和引入vue的位置一样 ./代表当前项目,../代表上一级项目 import '../static/style/reset.

Vue.js每天必学之组件与组件间的通信

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

Vuejs第十篇之vuejs父子组件通信

本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a

Vue2实现组件props双向绑定

Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用props的twoWay和.sync绑定修饰符就可以实现props的双向绑定功能,但是在Vue2中彻底废弃了此功能,如果需要双向绑定需要自己来实现. Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribu

vue-dialog的弹出层组件

本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 实现 多层弹出时,只有一个背景层 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue). 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持. 弹出层按钮支持回

基于Vue.js+Nuxt开发自定义弹出层组件

今天给大家分享VPopup 基于Vue.js构建的轻量级移动端弹出框组件,详情如下所示: 一款融合了Vant.NutUI等热门Vue组件库中的Popup弹层.Dialog对话框.Toast提示框.ActionSheet动作面板框.Notify通知框等功能. 快速使用 在main.js中引入组件 // 引入弹窗Popup import Popup from './components/popup' Vue.use(Popup) 支持如下两种 组件式 及 函数式 调用插件. 组件式 <templat

使用vue实现各类弹出框组件

简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, <dialog-bar></dialog-bar> 点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示 在弹窗组件中定义一个value值:v-model=&

vue中实现弹出层动画效果的示例代码

1 <template> <div class="home"> <!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --> <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> <button @click

javascript 弹出层组件(升级版)

这次还是利用原来代码的组织结构重新加强了功能,目前来说还有两个小问题,第一个是ie6下自定义弹出层会出现无法遮住select的情况,目前还没加入到组件里,可以自己在自定义的div里面加上ifame来遮罩,组件自带的弹出层可以遮住.第二个问题,由于是绝对定位,所以在改变浏览器窗口大小的时候会出现无法自动跟随.大家试试就知道了,当然问题肯定不少,只是这两个我认为比较重要的,暂时列出来,以后修复. 下面是代码,里面都有注释,可以直接运行. 在线演示 http://demo.jb51.net/js/20

MC Dialog js弹出层 完美兼容多浏览器(5.6更新)

效果图:MC Dialog 功能特点 1.支持键盘操作(esc关闭,enter执行当前获得焦点按钮的事件,屏蔽了ctrl键盘,屏蔽了tab键真正实现了一个模拟浏览器自带对话框的功能) 2.支持焦点智能移动(当焦点移出层外时,自动将焦点移回层或者有按钮则移到按钮上,保证焦点始终在层上,确保快捷键操作正确) 3.智能闪烁提示功能(当焦点移出层外部,比如你在层外点击了,则层会闪烁提示你必须在当前层操作,这里完美模拟了浏览器自带对话框的操作) 4.支持按钮外接回调事件(可以自定回调事件,绑定给按钮) 5

web 前端常用组件之Layer弹出层组件

经手几个项目,还是感觉 Layer 用起来比较的轻松,你能想到的 Layer 都能帮你做到. 感谢 Layer 作者贤心,Layer 官网地址:http://layer.layui.com/ 1. Layer 使用特点 Layer 具备全方位的解决方案,致力于服务各水平段的开发人员,让页面轻松地拥有丰富友好的操作体验. Layer 尽可能地在以更少的代码展现更强健的功能,注重性能的提升.易用和实用性.. Layer 兼容了包括IE6在内的所有主流浏览器. 数量可观的接口,可以自定义需要的风格,每

Layer组件多个iframe弹出层打开与关闭及参数传递的方法

一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http://layer.layui.com/ 二.多个iframe弹出层(非嵌套) 1.打开iframe弹出层js代码 (1)示例一: layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380p

jQuery 弹出层插件(推荐)

最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () { $.fn.PopDialog = function (options) { var defaults = { Event: "click", //触发响应事件 title: "title", //弹出层的标题 type: "text", //弹出层类型(text.容器

详解用vue编写弹出框组件

前言 最近研究了用vue编写弹出框的组件,发现其实这里面的门道还是有很多的.这篇文完全是用来记录总结下最近的学习成果,同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架,因此适合有一定vue2.0基础的同学阅读. 设计组件的思考 其实单纯的编写一个弹出框组件并不难,写一个模板,然后用v-if或者v-show指令还控制组件的出现与消失.真正困扰我的是,这个组件的调用方式,这个问题纠结了我好久. 调研了下资料,有些人建议,直接把组件标签插进模板中,然后通过直接控制组件