<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
</head>
<body>
###入门
<div class="spp">
{{num}}
{{obj}}
{{maa}}
{{arr}}
</div>
<script>
new Vue({ //vue实例
el:'.spp',//element 选择器
data:{
num:5,
obj:{name:'xiaohei',age:20},
maa:'你好 world',
arr:[0,1,2,3]
}
})
</script>
</body>
</html>
###vue的指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div class="app">
<ul>
//v-for循环
<li v-for="va in arrs">
{{va.num}}
{{va.name}}
{{va.age}}
</li>
</ul>
</div>
<script>
new Vue({
el:'.app',
data:{
arrs:[
{name:'ap', num:1, age:12},
{name:'ab', num:2, age:22}
]
}
})
</script>
</body>
</html>
###vue 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.min.js"></script>
</head>
<body>
<div class="app">
<table border=1 cellpadding="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(a,ind) in arrs">
<td >{{ind+1}}</td>
<td>{{a.name}}</td>
<td>{{a.age}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'.app',
data:{
arrs:[
{name:'ap', age:12},
{name:'ab', age:22}
]
}
})
</script>
</body>
</html>
