vue是一套构建用户界面的渐进式框架。
npm install jquery 利用GIt下载vue插件
vue Angular React 三大框架
将hello vue在页面中展现出来
<div class="itany">
{{mag}}
</div>
<script>
new Vue({
el:'.itany',
data:{
msg:'hello vue',
}
})
</script>
vue中v-for的使用：
<div class="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,ind ) in obj">{{index}}--{{val}}</li> 循环对象中元素对应的下标
</div>
<script>
new Vue({
el:'.itany',
data:{
arr:[1,2,3,4,5],
obj:{name:"BOB", age:"20", sex:"boy"},
arry:[
{name:"Bob", age:"21", sex:"girl"},
{name:"Jack", age:"19", sex:"boy"},
{name:"Tom", age:"25", sex:"girl"}
]
}
})
</script>
vue中table的使用:
<div class="itany">
<table boeder="1" cellspacing="0" width="300px">
<thead>
<th>姓名<th>
<th>年龄<th>
<th>性别<th>
</thead>
<tboday>
<tr v-for="val in arry">
<td>{{val.name}}</td>
<td>{{val.age}}</td>
<td>{{val.sex}}</td>
</tr>
</tboday>
</table>
</div>
<script>
new Vue({
el:'.itany',
data:{
arry:[
{name:"Bob", age:"21", sex:"girl"},
{name:"Jack", age:"19", sex:"boy"},
{name:"Tom", age:"25", sex:"girl"}
]
}
})
</script>
