VUE写⼀个简单的表格实例
⽬录：
1、脚本式开发.
2、⼯程化开发
3、⼯程化和脚本的区别
4、来个table试试⽔
4,1、⽬标
4.2、思路
4.3、设计与编码
4.4、效果
5、业务分离
6、功能拓展——个性化设置
正⽂：
我以前是后端（asp）开发，会点js、jQuery，但是不会写js特效，⾄于css嘛，拿来⽤现成的可以，⾃⼰动⼿写就不会了。
发现现在前端开发的势头太猛了，有⼀点要⼲掉后端的感觉，于是萌发了想要学⼀学前端开发的想法。那么前端三⼤框架，先学哪⼀个呢？就先学学Vue吧，为啥呢？很简单呀，他只有三个英⽂字母，好记好写。
Vue的学习时间⽐较短，才三、五天吧，所以有些⽤法可能很稚嫩，甚⾄是错误的，不过不怕，才刚开始学，及时发现错误及时改正就好。每天都写点⼼得，万⼀遇见好⼈给指点⼀⼆，那就挣⼤发了。
Vue⾄少有两种开发⽅式：脚本是开发和⼯程化开发。
⼀、脚本式开发
就是和jQuery的使⽤有点像，在页⾯⾥引⽤vue.js，然后按照vue的规则写模板、写代码，就可以开鲁了。这种⽅式和jQuery 挺像的，⽤着也是很爽的，改完代码⼀保存，浏览器⾥⾯⼀刷新就可以看到效果，很直观⽅便。
这种⽅式适合初初学者，以及对⼀些想法做测试，验证想法是否⾏的通。但是正式项⽬⾥⾯可不可以这么⽤呢？⼀本书⾥⾯说——不可以。但是作为⼀个Vue的初学者，我现在还没有能⼒做这个判断。
⼆、⼯程化开发
这个刚⼀开的时候感觉很懵逼，但是看着看着发现了，这个不就是后端做开发的⽅式吗？简直太像了。
后端开发，以asp mvc 为例（为啥不⽤其他语⾔呢？千万别挣，因为我只会这⼀种，其他的不会）。打开IDE，建⽴⼀个项⽬，选择框架版本，选择项⽬类型，选择。。。。。然后IDE会根据你的选择，加载DLL引⽤，加载必须的js脚本，建⽴⽂件夹，建⽴配置⽂件，建⽴默认页⾯、代码。然后⼀运⾏，⼀个简单的⽹站就出来了。
Vue的⼯程化开发居然也是这个样⼦的。⾸先要安装node和npm，然后安装Vue-cli，这个叫做脚⼿架，emmm，⼀脸懵逼这是啥？看看上⼀段我写的，这个脚⼿架统统能做。当然不是引⽤dll这类的，⽽是引⽤Vue开发需要的各种东东，也会让你做各种选择，最后建⽴⽂件夹，然后神奇的是，可以⽤node做⼀个站点，直接就运⾏了。还可以模拟后端。
这个也太⽜叉了吧，我感觉，再加上⼀个数据库（⽐如mysql），就没有后端啥事了。
具体怎么做就不细说了，emmmm，好吧我现在也只是⼀知半解。反正很神奇就对了。
三、⼯程化和脚本的区别
如果说脚本开发，是把js⽂件引⼊到页⾯，然后写代码的话，那么⼯程化是把⾃⼰的代码加到了Vue的框架⾥⾯，给框架补点⾁，整个项⽬就出来了。
历史的发展就是这样的，不管个⼈喜不喜欢，这种开发⽅式必定越来越⽕，不愿意接受的，早晚会被淘汰的。
四、来个table试试⽔
看官⽹、查百度会有⼀些简单的介绍，这⾥也是依据这些简单的介绍，来点稍微复杂⼀些的，也是⽐较实⽤的⼀种⽤法。因为我也只是初学，不知道这种⽤法属于什么级别的，抛砖引⽟，拿出来供⼤家参考⼀下。
1、⽬标
不管做什么事情，都要先定⼀个⽬标，这⾥虽然只是⼀个试⽔，但是也应该知道要做成啥样⼦的。那么就定⼀个简单的表格吧，⽐如下图这个样⼦的。
很简单的⼀个表格，列不多，因为列数不是问题。看了实现⽅式你就知道了。
2、思路
Vue的特点就是——数据驱动视图。数据为主，然后把数据绑定到页⾯。这个是核⼼，千万别跑偏了。
那么我们来分析⼀下，这个表格由两个部分组成：表头和表体。
表头：公司名称、电话等。实际项⽬⾥肯定还会有很多列。这⾥先拿两个举例。使⽤<tr><th>来标⽰。
表体：就是公司信息的列表，由多条数据组成，字段数量和表头对应。⽤<tr><td>来标⽰。
那么我们设计⼀个表头和表体的数据包，然后让Vue⼀绑定就ok了。
3、设计与编码
先设计⼀个数据包，emmmm，不知道专业的叫法是啥，反正就是弄⼀个json的结构。⽐如这样
var table = new Vue({
el: '#table',
data: {
message: '公司信息!',
orderBy: ["c1", "c2"], //可以控制字段的先后顺序，想调整列的先后顺序，改这个数组就⾏，可以做个性化设置
tableTh: {//表头的描述信息
c1: {
title: "公司名称", //还可以增加其他描述，⽐如width等
align: "left"
},
c2: {代码运行js特效
title: "电话",
align: "right"
}
},
dataList: [
{
//数据包，字段名作为关键字，便于列的调整先后顺序
c1: "度娘2",
c2: "123123123"
},
{
c1: "企鹅2",
c2: "7897899787"
},
{
c1: "阿⾥爸爸2",
c2: "456456456"
}
]
}
});
el 这个是Vue的保留字，必须这么写，后⾯是dom的ID，⽐如<div> 。⽤jQuery的思路就是 $(‘#table')。
data 这个也是Vue的保留字，后⾯是model，结构可以随意设置，怎么玩就看想象⼒了。
当然Vue还有很多保留字，⽐如⽅法的等等，不过这⾥先介绍这两个，其他的以后再说。
然后在设计⼀个模板，⽐如这样：
<div>
{{ 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>
不知道⼤家有没有发现⼀个问题：这⾥⾯没有任何和业务相关的东东，那个“序号”不算的话。
这个模板也很简单，表头⽤⼀个循环就出来了，数据包⾥⾯有多少列，就可以循环出来多少列，所以我开头说的，多少列不重要，因为循环就对了，管他多少列呢？
表体⽤了两个循环（嵌套循环）就出来了。这个⽤法⽐较很好理解吧。这个我就不想多解释了，说多了会有⼀种凑字数的感觉。
4、效果
发现我剧透了，上⾯那个图就是运⾏效果。数据包设计好，模板设置好，然后交给Vue就可以了，打开浏览器查看⽹页，就可以看到这个效果。
五、业务分离
这个模板可以看做是所有列表的通⽤模板，因为他适合任何⼀种数据，不管是公司信息列表，还是员⼯信息，还是产品信息，都可以这样写，⽽且copy过来之后不⽤改！因为我把业务相关的统统放到了数据包⾥⾯。增加⼀个列表需求，只需要写数据包即可，不⽤改模板代码，是不是很⽅便？
当然，如果⼤家都是这么做的，那么就是英雄所见略同。昨天在⼀个前端⾥问了半天，也没有⼈告诉我，他们的数据列表是怎么做的，结果我到现在也还是不知道在Vue⾥⾯⼤家是怎么做数据列表的。百度了⼀下，也没发现啥有⽤的信息。
六、功能拓展个性化设置
不知道⼤家有没有遇到这样的情况，接到⼀个任务，要求做⼀个数据列表⾥⾯有n个字段，这个没啥的嘛，做呗。但是这么多的列哪个在前哪个在后呢？如果⽂档⾥明确说明了，那么好办，按照⽂档⾥的来呗。如果⽂档⾥没有明确说明先后顺序，那么咋办？只能按照⾃⼰的习惯来了。
然后做好之后给⽤户看，第⼀个领导看了说，这个电话怎么放这了，不重要放最后好了。
然后给另⼀个领导看说，哎，这个电话怎么放最后了，不是和你们说了吗，这个要放前⾯！
刚才那个领导说，，，，，。
然后⼜给操作⼈员看，操作⼈说，这个电话放这⾥不习惯，能不能改⼀改？
这⾥只是举⼀个简单的例⼦，客户的需求总是千奇百怪的，调整顺序只是最简单最常见的。
对于客户来说，不就是改个位置吗，我⽤Excel天天改顺序，你们这个项⽬肯定⽐Excel厉害吧，改个顺序很难吗？
不难呀，只是别改来改去的，另外我到底听谁的？
细⼼的你可能会发现，数据包⾥⾯有⼀个orderBy: ["c1", "c2"]没有⽤上，这个是⼲嘛的？
这个不是给数据排序的，⽽是给列排序的。这个数组⾥放的是key，后⾯两个数据包都是以这些key来组织数据的。那么这个数组⾥的key的先后顺序就是列的先后顺序。
所以只需要改这个数组⾥的key就可以了。然后我们可以为每⼀个⽤户都设置⼀个独⽴的数组，这样每个⽤户都可以有⾃⼰的列的顺序了，互相不⼲扰。这样客户都满意了，我们也不⽤总是调整顺序了。
最后，模板需要改⼀下：
<div>
{{ message }}
<table class="table_default1">
<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提取数据在做绑定。这样，我们把调整列的先后顺序的业务需求也给分离出来了，还附带了⼀个福利——个性化设置。感谢⼤家的学习和对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。