2018-09-11
2018-09-11 本文已影响0人
Rascar
Vue是什么？
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
1.vue的应用
<div id="box">
{{name}}
</div}>
new Vue（V要大写）：{
el：“#box”（el是选择器的意思），
data：{
name：“你好”
}
}
2.Vue的v-for遍历下标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<ul>
<li v-for="(val,index) in arr">{{val}}-{{index}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
arr:[1,2,3]
}
})
</script>
</body>
</html>
3.Vue里面v-for的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<!--<li v-for="val in arrs">{{val.num}}{{val.nane}} {{val.age}}</li>-->
<li v-for="val in arrs">{{val.num}} {{val.nane}} {{val.age}}</li>
</ul>
</div>
<script>
new Vue({
el:"#box",
data:{
arrs:[
{num:1,nane:"苹果",age:1},
{num:2,nane:"香蕉",age:1},
{num:3,nane:"橘子",age:1},
{num:4,nane:"橙子",age:1}
]
}
})
</script>
</body>
</html>
用vue建立表单里的内容v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<table border="1" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</thead>
</tr>
<tbody v-for="val in arrs">
<td>{{val.num}}</td>
<td>{{val.pname}}</td>
<td>{{val.price}}</td>
</tbody>
</table>
</div>
<script>
new Vue({
el:"#box",
data:{
arrs:[
{num:1,pname:'香蕉',price:3},
{num:2,pname:'香蕉',price:2},
{num:3,pname:'香蕉',price:1},
]
}
})
</script>
</body>
</html>
