Vue是一个流行的用于构建用户界面的渐进式框架。那么如何使用vue进行数据流通呢？以下情况将使用v-for循环遍历数据。

1.打开html开发工具，创建一个新的html代码页。

2.在新创建的html代码页上创建一个ul标签，为这个标签设置一个app的id，然后在ul中创建一个li标签。

代码：

ul id='app '

李/李

/ul

3.引入vue.js在body的结束标记之前引入下载的vue.js文件。

4.创建一个vue实例。在导入的vue.js文件后面创建一个新的脚本标记，然后在这个标记中使用new vue()创建一个Vue实例，并将一个数组设置为sites。

代码：

script var app=new Vue({ El : ' # app '，data : { sites :[{ name: ' Runoob ' }，{ name: 'Google' }，{ name : '淘宝' }]})/script

5.使用v-for循环。在li标签上添加v-for=' sites in sites '，然后使用{{site.name}}打印遍历数组。

Li代码：li v-for='站点中的站点“{site。名称}}/li

6.保存html代码后，使用浏览器打开，可以看到浏览器页面上打印的用户名，表示vue的循环遍历已经成功使用。

7.所有代码。可以直接复制所有代码，粘贴到新创建的html文件中，修改vue.js的路径，保存后用浏览器打开看看效果。所有代码

！DOCTYPE htmlhtmltowneta charset=' UTF-8 ' title/title/head dyul id=' app ' Li v-for=' site中的site ' { site . name } }/Li/ulscript type=' text/JavaScript ' src=' http : js/vue . js '/scriptscriptvarapp=new vue({ El all code。可以直接复制所有代码，粘贴到新创建的html文件中，修改vue.js的路径，保存后用浏览器打开看看效果。所有代码：DOCTYPE html htmltowneta charset=' UTF-8 ' title/title/head dyul id=' app ' Li v-for=' site in site ' { site . name } }/Li/ulscript type=' text/JavaScript ' src=' http : js/Vue . js '/script script var app=new Vue({ El : ' # app '，data : { site 3360[{ name : ' Runoob ' })