VUE写一个简单的表格实例-创新互联
目录：
- 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、目标
不管做什么事情，都要先定一个目标，这里虽然只是一个试水，但是也应该知道要做成啥样子的。那么就定一个简单的表格吧，比如下图这个样子的。
很简单的一个表格，列不多，因为列数不是问题。看了实现方式你就知道了。
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写一个简单的表格实例-创新互联
URL分享：http://myzitong.com/article/hchgd.html