从后端到前端之Vue（一）写个表格试试水

 

目录：

 

一、脚本式开发.

二、工程化开发

三、工程化和脚本的区别

四、来个table试试水

4,一、目标

4.二、思路

4.三、设计与编码

4.四、效果

五、业务分离

六、功能拓展——个性化设置    

 

正文：

 

　　我之前是后端（asp.net）开发，会点js、jQuery，可是不会写js特效，至于css嘛，拿来用现成的能够，本身动手写就不会了。

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

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

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

1、脚本式开发

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

　　这种方式适合初初学者，以及对一些想法作测试，验证想法是否行的通。可是正式项目里面可不能够这么用呢？一本书里面说——不能够。可是做为一个Vue的初学者，我如今尚未能力作这个判断。

2、工程化开发

　　这个刚一开的时候感受很懵逼，可是看着看着发现了，这个不就是后端作开发的方式吗？简直太像了。

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

　　Vue的工程化开发竟然也是这个样子的。首先要安装node和npm，而后安装Vue-cli，这个叫作脚手架，emmm，一脸懵逼这是啥？看看上一段我写的，这个脚手架通通能作。固然不是引用dll这类的，而是引用Vue开发须要的各类东东，也会让你作各类选择，最后创建文件夹，而后神奇的是，能够用node作一个站点，直接就运行了。还能够模拟后端。

　　这个也太牛叉了吧，我感受，再加上一个数据库（好比mysql），就没有后端啥事了。

　　具体怎么作就不细说了，emmmm，好吧我如今也只是只知其一;不知其二。反正很神奇就对了。

3、工程化和脚本的区别

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

　　历史的发展就是这样的，无论我的喜不喜欢，这种开发方式一定愈来愈火，不肯意接受的，迟早会被淘汰的。

 

4、来个table试试水

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

　　一、目标

　　　　无论作什么事情，都要先定一个目标，这里虽然只是一个试水，可是也应该知道要作成啥样子的。那么就定一个简单的表格吧，好比下图这个样子的。

　　　　 

　　　　很简单的一个表格，列很少，由于列数不是问题。看了实现方式你就知道了。

 

　　二、思路

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

　　　　那么咱们来分析一下，这个表格由两个部分组成：表头和表体。

　　　　表头：公司名称、电话等。实际项目里确定还会有不少列。这里先拿两个举例。使用<tr><th>来标示。

　　　　表体：就是公司信息的列表，由多条数据组成，字段数量和表头对应。用<tr><td>来标示。

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

　　三、设计与编码

　　　　先设计一个数据包，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"
                }
            ]
        }
    });

 

 

　　el 这个是Vue的保留字，必须这么写，后面是dom的ID，好比<div id="table"> 。用jQuery的思路就是 $(‘#table’)。

　　data 这个也是Vue的保留字，后面是model，结构能够随意设置，怎么玩就看想象力了。

　　固然Vue还有不少保留字，好比方法的等等，不过这里先介绍这两个，其余的之后再说。

 

　　而后在设计一个模板，好比这样：

<div id="table">
    {{ message }}
    <table class="table_default1" >
        <tr>
            <th>序号</th>
            <th v-for="th in tableTh" >
                {{th.title}}
            </th>
        </tr>
        <tr v-for="(tr,index) in dataList">
            <td>{{index+1}}</td>
            <td v-for="td in tr" >
                {{td}}
            </td>
        </tr>
    </table>
</div>

 

　　不知道你们有没有发现一个问题：这里面没有任何和业务相关的东东，那个“序号”不算的话。

　　这个模板也很简单，表头用一个循环就出来了，数据包里面有多少列，就能够循环出来多少列，因此我开头说的，多少列不重要，由于循环就对了，管他多少列呢？

　　表体用了两个循环（嵌套循环）就出来了。这个用法比较很好理解吧。这个我就不想多解释了，说多了会有一种凑字数的感受。

 

　　四、效果

　　发现我剧透了，上面那个图就是运行效果。数据包设计好，模板设置好，而后交给Vue就能够了，打开浏览器查看网页，就能够看到这个效果。

5、业务分离

　　这个模板能够看作是全部列表的通用模板，由于他适合任何一种数据，无论是公司信息列表，仍是员工信息，仍是产品信息，均可以这样写，并且copy过来以后不用改！由于我把业务相关的通通放到了数据包里面。增长一个列表需求，只须要写数据包便可，不用改模板代码，是否是很方便？

　　固然，若是你们都是这么作的，那么就是英雄所见略同。昨天在一个前端群里问了半天，也没有人告诉我，他们的数据列表是怎么作的，结果我到如今也仍是不知道在Vue里面你们是怎么作数据列表的。百度了一下，也没发现啥有用的信息。

 

6、功能拓展个性化设置

　　不知道你们有没有遇到这样的状况，接到一个任务，要求作一个数据列表里面有n个字段，这个没啥的嘛，作呗。可是这么多的列哪一个在前哪一个在后呢？若是文档里明确说明了，那么好办，按照文档里的来呗。若是文档里没有明确说明前后顺序，那么咋办？只能按照本身的习惯来了。

　　而后作好以后给用户看，第一个领导看了说，这个电话怎么放这了，不重要放最后好了。

　　而后给另外一个领导看说，哎，这个电话怎么放最后了，不是和大家说了吗，这个要放前面！

　　？？？刚才那个领导说，，，，，。

　　而后又给操做人员看，操做人说，这个电话放这里不习惯，能不能改一改？

　　这里只是举一个简单的例子，客户的需求老是千奇百怪的，调整顺序只是最简单最多见的。

　　对于客户来讲，不就是改个位置吗，我用Excel每天改顺序，大家这个项目确定比Excel厉害吧，改个顺序很难吗？

　　不难呀，只是别改来改去的，另外我到底听谁的？

 

　　细心的你可能会发现，数据包里面有一个orderBy: ["c1", "c2"]没有用上，这个是干吗的？

　　这个不是给数据排序的，而是给列排序的。这个数组里放的是key，后面两个数据包都是以这些key来组织数据的。那么这个数组里的key的前后顺序就是列的前后顺序。

　　因此只须要改这个数组里的key就能够了。而后咱们能够为每个用户都设置一个独立的数组，这样每一个用户均可以有本身的列的顺序了，互相不干扰。这样客户都满意了，咱们也不用老是调整顺序了。

　　最后，模板须要改一下：

 

<div id="table">
    {{ message }}
    <table class="table_default1" style=" ">
        <tr>
            <th>序号</th>
            <th v-for="key in orderBy" >
                {{tableTh[key].title}}
            </th>
        </tr>
        <tr v-for="(tr,i) in dataList">
            <td>{{i+1}}</td>
            <td v-for="key in orderBy"  v-bind:align="tableTh[key].align">
                {{tr[key]}}
            </td>
        </tr>
    </table>
</div>

 

　　先遍历这个数组，而后用里面的key提取数据在作绑定。这样，咱们把调整列的前后顺序的业务需求也给分离出来了，还附带了一个福利——个性化设置。