1,下载安装vue.js
下载安装git
打开git输入:npm install vue
2,
el:提供一个在页面上已存在的DOM元素作为vue实例的挂载目标
3,
data:定义所需要的数据 data的属性能够相应数据变化 会被混合在实例中
4,
v-for 循环列表数据
语法:v-for='值,下标 in 数组'
<li v-for ='item(变量),index in arr(不固定)'
5,代码展示
<body>
<div id='itany'> //class
<table border='1' cellspacing='0'>
<thead>
<tr>
// th与 td区别:加粗字体
< 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>
<script src='./js/vue.js'></script>
<script>
new Vue({ //提供全局vue
//写参数
el:'#itany',
data:{
arr:[
{num:1,pname:'香蕉',price:3},
{num:2,pname:'苹果',price:2},
{num:3,pname:'鸭梨',price:1}
]
}
})
</script>
</body>