成都创新互联网站制作重庆分公司

VUE写一个简单的表格实例-创新互联

目录:

成都创新互联公司自2013年创立以来,是专业互联网技术服务公司,拥有项目成都做网站、网站制作、成都外贸网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元太康做网站,已为上家服务,为太康各地企业和个人服务,联系电话:18980820575
  • 1、脚本式开发.
  • 2、工程化开发
  • 3、工程化和脚本的区别
  • 4、来个table试试水
  • 4,1、目标
  • 4.2、思路
  • 4.3、设计与编码
  • 4.4、效果
  • 5、业务分离
  • 6、功能拓展——个性化设置    

正文:

我以前是后端(asp.net)开发,会点js、jQuery,但是不会写js特效,至于css嘛,拿来用现成的可以,自己动手写就不会了。

发现现在前端开发的势头太猛了,有一点要干掉后端的感觉,于是萌发了想要学一学前端开发的想法。那么前端三大框架,先学哪一个呢?就先学学Vue吧,为啥呢?很简单呀,他只有三个英文字母,好记好写。

Vue的学习时间比较短,才三、五天吧,所以有些用法可能很稚嫩,甚至是错误的,不过不怕,才刚开始学,及时发现错误及时改正就好。每天都写点心得,万一遇见好人给指点一二,那就挣大发了。

Vue至少有两种开发方式:脚本是开发和工程化开发。

一、脚本式开发

就是和jQuery的使用有点像,在页面里引用vue.js,然后按照vue的规则写模板、写代码,就可以开鲁了。这种方式和jQuery挺像的,用着也是很爽的,改完代码一保存,浏览器里面一刷新就可以看到效果,很直观方便。

这种方式适合初初学者,以及对一些想法做测试,验证想法是否行的通。但是正式项目里面可不可以这么用呢?一本书里面说——不可以。但是作为一个Vue的初学者,我现在还没有能力做这个判断。

二、工程化开发

这个刚一开的时候感觉很懵逼,但是看着看着发现了,这个不就是后端做开发的方式吗?简直太像了。

后端开发,以asp.net mvc 为例(为啥不用其他语言呢?千万别挣,因为我只会这一种,其他的不会)。打开IDE,建立一个项目,选择框架版本,选择项目类型,选择。。。。。然后IDE会根据你的选择,加载DLL引用,加载必须的js脚本,建立文件夹,建立配置文件,建立默认页面、代码。然后一运行,一个简单的网站就出来了。

Vue的工程化开发居然也是这个样子的。首先要安装node和npm,然后安装Vue-cli,这个叫做脚手架,emmm,一脸懵逼这是啥?看看上一段我写的,这个脚手架统统能做。当然不是引用dll这类的,而是引用Vue开发需要的各种东东,也会让你做各种选择,最后建立文件夹,然后神奇的是,可以用node做一个站点,直接就运行了。还可以模拟后端。

这个也太牛叉了吧,我感觉,再加上一个数据库(比如mysql),就没有后端啥事了。

具体怎么做就不细说了,emmmm,好吧我现在也只是一知半解。反正很神奇就对了。

三、工程化和脚本的区别

如果说脚本开发,是把js文件引入到页面 ,然后写代码的话,那么工程化是把自己的代码加到了Vue的框架里面,给框架补点肉,整个项目就出来了。

历史的发展就是这样的,不管个人喜不喜欢,这种开发方式必定越来越火,不愿意接受的,早晚会被淘汰的。

四、来个table试试水

看官网、查百度会有一些简单的介绍,这里也是依据这些简单的介绍,来点稍微复杂一些的,也是比较实用的一种用法。因为我也只是初学,不知道这种用法属于什么级别的,抛砖引玉,拿出来供大家参考一下。

1、目标

不管做什么事情,都要先定一个目标,这里虽然只是一个试水,但是也应该知道要做成啥样子的。那么就定一个简单的表格吧,比如下图这个样子的。

     VUE写一个简单的表格实例

很简单的一个表格,列不多,因为列数不是问题。看了实现方式你就知道了。

2、思路

Vue的特点就是——数据驱动视图。数据为主,然后把数据绑定到页面。这个是核心,千万别跑偏了。

那么我们来分析一下,这个表格由两个部分组成:表头和表体。

表头:公司名称、电话等。实际项目里肯定还会有很多列。这里先拿两个举例。使用来标示。

表体:就是公司信息的列表,由多条数据组成,字段数量和表头对应。用来标示。

那么我们设计一个表头和表体的数据包,然后让Vue一绑定就ok了。

3、设计与编码

先设计一个数据包,emmmm,不知道专业的叫法是啥,反正就是弄一个json的结构。比如这样

var table = new Vue({
    el: '#table',
    data: {
      message: '公司信息!',
      orderBy: ["c1", "c2"], //可以控制字段的先后顺序,想调整列的先后顺序,改这个数组就行,可以做个性化设置
      tableTh: {//表头的描述信息
        c1: {
          title: "公司名称", //还可以增加其他描述,比如width等
          align: "left"
        },
        c2: {
          title: "电话",
          align: "right"
        }
      },
      dataList: [
        {
          //数据包,字段名作为关键字,便于列的调整先后顺序
          c1: "度娘2",
          c2: "123123123"
        },
        {
          c1: "企鹅2",
          c2: "7897899787"
        },
        {
          c1: "阿里爸爸2",
          c2: "456456456"
        }
      ]
    }
  });
 

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前标题:VUE写一个简单的表格实例-创新互联
标题来源:http://cxhlcq.com/article/hchgd.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部