vue初探--编写表格组件

dabai 发布于2019-08-19 17:12 / 2692人阅读

摘要：容器里面包含部分，其一为提供过滤器的入口其二为表格组件。数据绑定，简写形式为在父组件和子组件的通讯中，必须要在子组件里面声明。如果是编写则必须是注册组件的语法糖。下次还是上动图吧以后基本上碰到这种使用表格呈现数据的组件。

在项目当中，经常会有表格组件，包含2部分，其一为table-header,其二为table-content

然后在这个小demo里面涉及到了vue的个别指令: v-for v-model v-bind等。还有父组件和子组建的数据共享，过滤器等功能。

    HTML模板:

    
        
            Search 
        
        
        
    
    
    
        
            {{item}}
        
        
            
                {{item.a}}
                {{item.b}}
                {{item.c}}
                {{item.d}}

首先在模板文件里面：

#global-table提供了模板容器，同时提供了vue实例化的选择符。容器里面包含2部分，其一为input提供过滤器的入口,其二为demo-grid表格组件。

这时HTML5提供的模板标签，可以写在html文件里面，但是不在网页上面出现。可通过选择符获取模板.

v-for 基于原数据将元素或者模板块重复数次。

v-bind 数据绑定，简写形式为:prop.在父组件和子组件的通讯中，必须要在子组件里面声明prop。

:prop.sync提供双向绑定(只能用于prop绑定)

:prop.once提供单向绑定(只能用于prop绑定)

orderBy name sortKey 按照name来进行排序,sortkey默认是1，为升序，sortKey为-1的时候为降序。

filterBy filterKey in name在name这个过滤范围内进行过滤

    
    vm实例化:

    new Vue({
        el: "#example",
        data: {
            gridContent: [],
            gridHeader: ["目标", "日志", "日期", "状态"],
            AorB: false
        }
    });
    
    Vue.component("demo-grid", {
        template: "#grid-template",
        props: {
            tableContent: Array,
            tableHeader: Array,
            isA: Boolean
        },
        data: function() {
            //对于实例数据的处理
            return {
            
            }
        },
        methods: function() {
            changeData: function() {
                !this.isA;
                if(this.isA) {
                    return this.tableContent = itemsB;
                }
                return this.tableContent = itemsA;
            }
        }
    });

new Vue({}) 创造一个vue的根实例。这个实例事实上就是vue这个MVVM模式中的ViewModel.在里面传入的对象包含了数据，模板，挂载方法，生命周期钩子等选项。

#el为实例提供挂载的元素

data object | Function vue实例的数据对象。如果是编写Component则必须是Function.

Vue.component({}) 注册组件的语法糖。传入一个可配置的对象

template实例模板。模板默认替换挂载元素。如果replace选项为false,模块将插入挂载元素内。本demo就在提供的模板文件。

props Array | Object 使用父组件的数据。如果是Object类型的可以进行类型检查，自定义验证，默认值等。

methods Object 实例方法。实例可以直接访问这些方法。

    //模拟出来的数据

    var itemsA = [
    {
        a: "asdasdsad",
        b: 1,
        c: 1,
        d: 1
    },
    {
        a: "sdfsdfdsfewrw",
        b: 2,
        c: 2,
        d: 2
    },
    {
        a: "sdfsfsdfs",
        b: 3,
        c: 3,
        d: 3
    }
];
var itemsB = [
    {
        a: "sdfsdfsewrewrc",
        b: 11,
        c: 11,
        d: 11
    },
    {
        a: "sdfsdfeewb",
        b: 22,
        c: 22,
        d: 22
    },
    {
        a: "qwewqewwwea",
        b: 33,
        c: 33,
        d: 33
    },
];

唉。下次还是上动图吧- -

以后基本上碰到这种使用表格呈现数据的组件。直接实例化一个vm，在实例上提供不同的数据和方法。

专线服务云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78291.html

Vue.js 官方示例初探（ES6 改写）

摘要：双叹号强制类型转换为布尔值。官方示例代码用注册了全局组件，会把自动注册为属性，所以没有手动写属性。如果对象是响应的，将触发视图更新。这是用来布尔值，又学了一招和分别代表单击和双击事件绑定。如果觉得有帮助，欢迎 star哈~ https://github.com/jiangjiu/blog-md/issues/11 感谢作者 @尤小右大大边写的超级带感的 Vue.js 前端框架，赠送...

Jason 2019-08-19 18:40 评论0 收藏0
初探vue-cli 3.0

摘要：当你将一系列的特性选择完毕后最后回提示你是否将已选项保存成一个快速将来可复用的当你选择保存时，被保存的将会存在用户的目录下一个名为的文件里。准备工作 npm install -g @vue/cli or yarn global add @vue/cli 安装需要Node.js8.9以上版本，安装完成后可以通过vue --version来验证是否安装成功项目创建 vue create...

superPershing 2019-08-23 12:23 评论0 收藏0
从源码看Element UI Table组件实现思路

摘要：接下来来看一下是如何编写一个组件的，在看源码之前，首先还是要对他的组件的大致功能有一个了解，这样我们在看源码的时候才会知道这一段大概实现了什么功能。最后我实现的功能文档以及最终的一个样例在你实现一个组件过程中，一定要注意一下几点将代码模块化并且分离。如果你将大量的逻辑或者是代码都放在钩子函数中（比如mounted），那么写出来的组件代码将非常丑陋，这样子写出的代码也往往难以维护。...

moven_j 2019-08-20 16:32 评论0 收藏0
FE.TEST-前端测试初探

摘要：使用可以快速生成一个项目，其中包含了和以及覆盖率统计的配置参考一个创建测试脚本的快速方法其他参考资料前端自动化测试概览测试之使用对项目进行单元测试 showImg(https://segmentfault.com/img/bVbjfXr?w=600&h=317); 前言测试可以提供快速反馈，根据测试用例覆盖代码，从而提升代码开发效率和质量。根据投入产出价值，通常迭代较快的业务逻辑不做...

Travis 2019-08-23 12:55 评论0 收藏0