数据工厂平台-4:首页vue之初体验

上节我们最后 已经为首页打造好了vue的前置环境，本节开始正式写一个vue元素了。

我们先写一个div，设置好id，作为我们一个vue对象的dom母体。

然后我们在它下面就可以进行各种vue元素的使用了，比如我们再新建一个子div，作为循环母体：

给它加上一个v-for的属性(vue的属性一般都是v-开头) 这个v-for就表明，这个div的子内容 会进行循环展示，并且 用i 来遍历这个叫all_links的列表。

然后我们给它写好要循环的子内容，就是超链接a标签：

如上图，这个a标签 后面还有个 br标签，br是换行的意思，这样里面的a和br都会被循环展示，每个超链接都是独占一行了就可以。而超链接的俩个内容哦，分别是i.link_url 和 名字i.link_name， 注意，为了区分我们上节课讲的原始写法{{ }} ，这里使用[[ ]] 俩对中括号来进行表明这是vue的变量。

好，到这，我们的vue的dom层算是写完了，紧接着就是bom。

如上图，我们在下面设置一个 新的Vue对象，并且叫做div。这个Vue对象只要关联到 <div id="links_div">上，那么就相当于完成了bom层。剩下的就是填里面的具体内容了。

所以先关联：

关联很简单，写个el冒号，然后“#关联的vue dom的id即可”

关联成功后，这个vue对象内还可以进行很多设置和操作，这些操作都会作用在<div id="links_div">内部的变量和数据上。

新增加的这个delimiters 只是用来告诉浏览器，我要用 [[ ]] 来在dom中表示变量的设置而已，大家尽量都加上，后期我们在说其他的，前期我们照葫芦画瓢即可。

紧着就该进入主要内容：

我们新加了data:{} 设置，这大括号内，就可以对我们dom中所有的变量的值进行设置了，比如我们给上面写好的 被遍历的数组列表：all_links，给它填入一个列表数据即可让dom中成功展示。

在上一节中，我们已经准备好了可以让bom解析的超链接的列表，所以这里直接拿来用，拿来用的时候注意要加|safe 不然会解析出错。

这里引用的还是古老的直接引用，所以用的是两对大括号{{ }} 。不过在里面加了|safe后，应该不会出现问题了。

启动服务，刷新页面，看看效果：

可以看到，成功展示了。

可能看到这里，很多小伙伴会表示，为什么vue的写法 反而比 传统的 直接在dom层 写{% for i in all_links %} 要复杂这么多呢？

那是因为这个循环展示，并不复杂，而如果我们之后做很复杂的数据功能，那么传统的写法不要太难，而vue 却总是如此 一个难度。具体的便利我们之后的复杂功能中就会感受的到了。

当然，万事无绝对，比如这种简单循环展示，的确原始写法更简单，而且因为我们测开的宗旨之一是用最低的成本把事情做好即可，所以在实际工作中，我们要灵活运用各种写法，融会贯通，才能又快又好的完成任务，而不是一味的死认一个框架。

这在之后我们的样式中，关于用elementUI 还是用 bootstratp3 也没有明确规定，只要看着舒坦交互丝滑即可。

--------这里扯远一点：

其实在技术届，关于技术栈的争论几十年来一直未停止过。

比如什么语言最好：python说js落后 说java麻烦，java说python不大气只是脚本语言，底层又慢又弱，而c语言说到效率笑看所有语言。新崛起的go又觉得一切都是垃圾。语言其实从来没有强弱之分，有强弱之分的是使用者。语言其实都是各有优缺点。

大家经常听到有人说其他语言 其他框架不好 不好的，其中80%是并不会他怼的那种语言/框架，而是惧怕自己不会的技术被认可 流行导致自己失利的说辞，另外19%是 确实会俩种技术，然后根据自己使用场景和两种技术的优缺点评价说哪种比另一种就是好，其实这也不对。真正剩下的1%的人是中立派，他们明确多种技术之间在各个层面的差别，但是他们不会去喷任何一种，而是想办法把这些技术的优点融合在一起使用，并不单纯的信奉一种，他们认为把事情做好即可。

比如python，他的底层并发虽然不行，但是它可以调用java,调用c语言。

比如前端，vue和传统js 和jq 灵活运用。比如样式，bootstrap3和elementui和网上抄的第三方样式，甚至还有自己手写的各种css都可以用，根据不同的场景挑选不同的技术，做到极致可以摆脱各种缺点。

当然要做到上述牛x的境界，可非常人可企及，如你如我普通测开来说，能学会一种并精通，能把事情做完即可。所以每当看到有人因为技术栈不同而争论的时候，那只是因为双方都没有真正掌握对方技术而已。

在测开领域来说，java和python平分天下，正在两者互掐的时候，一个新型的golang 已经悄然升起。所以我建议大家的副语言，可以掌握go。