VUE写了一个简单的表格例子

目录：

1.脚本开发。2.工程开发。3.工程和脚本的区别。4.试试桌子。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的框架中，在框架中加入一些肉，整个项目就出来了。

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

第四，试一张桌子试试水

看官网查百度的时候会有一些简单的介绍。在这里，根据这些简单的介绍，它是一个更复杂和实用的用法。因为我只是一个初学者，不知道这个用法属于什么级别，给大家参考一下。

1、目标

无论你做什么，你都必须先设定一个目标。虽然这只是试水，但你也应该知道该怎么做。然后做一个简单的表格，如下图。

很少列的简单表，因为列数不是问题。看看实现就知道了。

2.主意

Vue的特点是——数据驱动视图。基于数据，然后将数据绑定到页面。这是核心，不要误入歧途。

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

表头：公司名称、电话号码等。实际项目中肯定会有很多栏目。这里有两个例子。用trth标记。

表体：是公司信息的列表，由多条数据组成，字段数对应表头。由trtd标记。

然后我们设计一个有头有表体的数据包，然后一绑定就让Vue ok。

3.设计和编码

首先，设计一个数据包，emmmm。我不知道专业名称是什么。反正就是得到一个json结构。像这样

var table=new vue({ El : ' # table '，data : { message : ' company information！'，orderBy: ['c1 '，' c2']，//可以控制字段的顺序。如果你想调整列的顺序，只要改变这个数组。您可以在标题{///{ title : '公司名称'中个性化描述信息c1://还可以添加其他描述。例如宽度和其他对齐方式： '左' }，c2: {title : '电话'，align3360 '右' }，datalist 3360[{//数据包，字段名为关键字，便于调整列的顺序c1: ' duniang 2 '，C2: '123123123' }，{ c1: ' Penguin 2 '，c 2: ' 78978979777El是Vue的保留字，必须这样写，后面跟dom ID，比如div。使用jQuery的想法是$ ('# table ')。

数据也是Vue的保留词，后面是模型，结构可以随意设置，怎么玩就看想象力了。

当然，Vue还有很多保留词，比如方法等。不过这两个字先介绍到这里，其他的以后再讨论。

然后设计一个模板，比如这样：

div { { message } } table class=' table _ default 1 ' tr第th个序列号/第th个v-for=' th in table th ' { th。title}}/th/tr tr v-for=' (tr，index)在data list ' TD { { index 1 } }/TD TD v-for=

不知道大家有没有发现一个问题：如果“序列号”不算的话，那就没有和业务相关的东西了。

这个模板也很简单。标题将循环出现。数据包中有多少列，就可以循环出多少列。因此，正如我在开始时所说的，有多少列并不重要，因为循环是正确的，无论有多少列。

表体有两个循环(嵌套循环)。这个用法很容易理解。我不想解释这个。如果我说得太多，我会有一种数词的感觉。

4.影响

我发现我很有戏剧性，上图是跑步效果。设计好数据包，设置好模板，然后交给Vue。您可以通过打开浏览器查看网页来看到这种效果。

动词（verb的缩写）业务分割

这个模板可以看作是所有列表的通用模板，因为它适用于任何一种数据，无论是公司信息列表、员工信息还是产品信息，复制后都不需要更改！因为我把所有与业务相关的信息都放在了数据包里。要添加一个列表需求，您只需要编写数据包，而不需要更改模板代码。方便吗？

当然，如果每个人都这样做，那么英雄所见略同。昨天在一个前端群问了很久，没人告诉我怎么做数据列表。结果还是不知道怎么在Vue做数据列表。百度没有找到任何有用的信息。

不及物动词功能扩展的个性化设置

不知道大家有没有遇到这样的情况，我接到一个任务，要求做一个有N个字段的数据列表。这没什么，照做就是了。但是这些列中哪一个是第一个，哪一个是最后一个呢？如果在文档中明确说明，就很容易处理。跟着文件走。如果订单没有在文件中明确说明怎么办？我只能按照自己的习惯来。

然后，做好之后，给用户看。第一个领导看了看说，这个手机怎么放在这里不重要，放在最后。

然后拿给另一个领导看，说：“嘿，你为什么把这个手机放在最后？我不是告诉过你这个要放在前面吗？”

？领导刚才说了。

然后我给接线员看了看。接线员说这个电话在这里不习惯。你能改变它吗？

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

对于客户来说，只是换个位置。我每天用Excel改订单。你的项目肯定比Excel好。改变顺序很难吗？

不难，就是不改，我听谁的？

如果您小心，您可能会发现有一个orderBy: ['c1 '，' c2']没有使用。这是什么？

这不是对数据进行排序，而是对列进行排序。这个数组中有键，这些键用于组织接下来两个包中的数据。那么这个数组中键的顺序就是列的顺序。

所以只要改变这个数组中的键。然后我们可以为每个用户设置一个独立的数组，这样每个用户就可以有自己的列顺序，而不会相互干扰。这样，客户就满意了，我们就不用一直调整订单了。

最后，模板需要更改：

div { { message } } table class=' table _ default 1 ' tr第几个序列号/第几个v-for='键按' {table th [key]'顺序排列。title}}/th/tr tr v-for=' (tr，I)在datalist' TD {{I 1}}/TD TD v-for='中通过' v-bind: align=' tableth [key]按键顺序排列。align ' { tr[key]} }/TD/tr/table/div首先遍历这个数组，然后使用里面的key提取数据进行绑定。这样，我们分离了调整栏目顺序的业务需求，还附加了福利——的个性化设置。感谢您的学习和支持。