1、Vue库的下载
npm install vue
2、Vue的三个框架
Vue Angular React
3、hello vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
{{msg}}
</div>
<script src='[js/vue.js](js/vue.js)'></script>
<script>
new Vue({ //element元素
el:'#itany',
data:{//写数据
msg:'hello vue'
}
})
</script>
</body>
</html>
4、Vue的指令v-for循环
div部分
<div id='itany'>
<ul>
<li v-for="val in arr">{{val}}</li>
<li v-for="val in obj">{{val}}</li>
<li v-for="(val,index) in arr">{{index}}=>{{val}}</li>
<li v-for="(val,index) in obj">{{index}}=>{{val}}</li>
<li v-for="val in arrs">{{val.num}} {{val.pname}} {{val.price}}</li>
</ul>
</div>
js部分
<script>
new Vue({//element元素
el:'#itany',
data:{//写数据
arr:[1,2,3,4,5,6,7,8,9],
obj:{name:'jack',age:18},
arrs:[
{num:1,pname:"香蕉",price:3},
{num:2,pname:"苹果",price:4},
{num:3,pname:"西瓜",price:0.3}
], ars:[
{pname:"香蕉",price:3},
{pname:"苹果",price:4},
{pname:"西瓜",price:0.3}
]
}
}
})
</script>
输出为：
1
2
3
4
5
6
7
8
9
jack
18
0=>1
1=>2
2=>3
3=>4
4=>5
5=>6
6=>7
7=>8
8=>9
name=>jack
age=>18
1 香蕉 3
2 苹果 4
3 西瓜 0.3
5、v-for循环表格
<div id='itany'>
<table border='1' cellspacing='0'>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="value in arr">
<td>{{value.num}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
</tr>
</tbody>
</table>
</div>
<hr>
<div id='itany'>
<table border='1' cellspacing='0'>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arr">
<td>{{index+1}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
</tr>
</tbody>
</table>
</div>
输出后的表格如下：
13989047-d751932e2689ab77.png
网友评论