2018-09-11 Vue day01
2018-09-11 本文已影响0人
演不完的电影
1、Git
2、Vue入门学习（练习）
注：先引入vue.js
(1)入门练习
<body>
<div id="app-01">
{{msg}}
{{num}}
{{arr}}
{{obj}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({//vue实例
el:'#app-01', //element（元素） 选择器（获取元素）
data:{ //data存放数据
msg:'Hello Vue!',
num:20,
arr:['任蕾','袁月','李串串'],
obj:{name:'lii',age:'18'}
}
})
</script>
</body>
（2）练习2
<body>
<div id="app-02">
<ul>
<li v-for="v in arr">{{v}}</li>
<li v-for="(val,ind) in arr">
{{ind}}------{{val}}
</li>
<li v-for="value in obj">{{value}}</li>
<li v-for="(val,ind) in obj">
{{ind}}=>{{val}}
</li>
<li v-for='value in arrs'>
{{value}}
</li>
<li v-for="(value,index) in arrs">
{{value.num}}
{{value.name}}
{{value.price}}
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app-02',
data:{
arr:['任蕾','袁月','李串串'],
obj:{name:'jack',age:18},
arrs:[
{
num:1,
name:'apple',
price:3
},
{
num:2,
name:'banana',
price:2
}
]
}
})
</script>
</body>
（3）练习3
<body>
<div id="app-02">
<table border="1" cellspacing='0' width='300' align="center" style="text-align:center;">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,index) in arrs">
<td>{{index+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app-02',
data:{
arrs:[
{
name:'apple',
price:3
},
{
name:'banana',
price:2
}
]
}
})
</script>
</body>
