准备步骤如第一天
代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="../node_modules/jquery"></script>
</head>
<body>
<!--v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名-->
<div id="app1">
<ol>
<li v-for="site in sites">
{{site.name}}
</li>
</ol>
</div>
<!--v-for 迭代对象-->
<div id="app2">
第一种方式：
<ul>
<li v-for="value in List">
{{value}}
</li>
</ul>
<br>
第二种方式：
<ul>
<li v-for="(value, key) in List">
{{ key }} : {{ value }}
</li>
</ul>
<br>
第三种方式：
<ul>
<li v-for="(value, key, index) in List">
{{ index }}：{{ key }} ： {{ value }}
</li>
</ul>
</div>
<!--v-for 迭代整数-->
<div id="app3">
<ul>
<li v-for="n in 10">
{{n}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
/*v-for指令*/
/* new Vue({
el:'#app1',
data:{
sites:[
{name:'for'},
{name:'语'},
{name:'句'}
]
}
})*/
/*v-for迭代指令*/
/* new Vue({
el:'#app2',
data:{
List:{
name:'迭代数据1',
url:'迭代数据2',
}
}
})*/
<!--v-for 迭代整数-->
new Vue({
el: '#app3'
})
</script>
</html>