上节我们最后 已经为首页打造好了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后，应该不会出现问题了。
启动服务，刷新页面，看看效果：
可以看到，成功展示了。
