循环语句
1.v-for
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：
首选准备一个数组，然后在构建Vue的时候把这个数组作为参数传递进去，最后在视图上，通过v-for 遍历这个数组。
代码：
<style>
table tr th,
table tr td {
border: 1px solid gray;
text-align: center;
}
table {
border-collapse: collapse;
width: 300px;
}
thead {
background-color: aquamarine;
}
</style>
<body>
<div id="div1">
<table>
<thead>
<tr>
<th>letter1</th>
<th>letter2</th>
<th>letter3</th>
</tr>
</thead>
<tbody>
<tr v-for="letter in letters">
<td>{{letter.first}}</td>
<td>{{letter.second}}</td>
<td>{{letter.third}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var letters1=[
{first:"a",second:"b",third:"c"},
{first:"d",second:"e",third:"f"},
{first:"g",second:"h",third:"i"}
];
new Vue({
el:"#div1",
data:{
letters:letters1
}
})
</script>
</body>效果图：
同时，在上面代码中，可以看出th和td的区别，<th>与<td>同样是标示一个储存格,唯一不同的是<th>所标示的储存格中的文字是以粗体出现。
2.index用法
通过如下方式可以获取遍历下标，<tr v-for="letter,index in letters">。
代码：
<div id="div1">
<table>
<thead>
<tr>
<th>index</th>
<th>letter1</th>
<th>letter2</th>
<th>letter3</th>
</tr>
</thead>
<tbody>
<tr v-for="(letter,index) in letters">
<!--<tr v-for="index,letter in letters">-->//错误的写法，index在内容后面
<td>{{index}}</td>
<td>{{letter.first}}</td>
<td>{{letter.second}}</td>
<td>{{letter.third}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var letters1=[
{first:"a",second:"b",third:"c"},
{first:"d",second:"e",third:"f"},
{first:"g",second:"h",third:"i"}
];
new Vue({
el:"#div1",
data:{
letters:letters1
}
})
</script>效果图：
错误写法：<tr v-for="index,letter in letters">，将得到下图的结果。
注：一般迭代某一个对象的属性，参数顺序为：（value，key，index）。
3.纯数字遍历
通过如下方式可以进行纯数字遍历：<div v-for="i in 10">。
代码：
<div id="div1">
<div v-for="i in 10">
{{i}}
</div>
</div>
<script>
new Vue({
el: "#div1"
})
</script>
效果图：
属性绑定
1.v-bind做属性绑定
代码：
<div id="div1">
<a v-bind:href="page">点我点我</a>
</div>
<script>
new Vue({
el:"#div1",
data:{
page:"http://baidu.com"
}
})
</script>2.v-bind:href 简写成 :href
<a :href="page">点我点我</a>