vue.js
git npm install vue 下载vue.js插件
引用方法 <script src='jue.js'></script>
1.vue.js的基础
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'.box',
data:'你好世界'
})
</script>
</body>
</html>
1.vue.js的基础v-for
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--<div class="box">
{{msg}}
<ul>
<li v-for='val in obj'>{{val}}</li>
</ul>
</div>-->
<div class="box-bg">
{{msg}}
<ul>
<li v-for='valae in obj'>{{valae}}</li>
<li v-for='(val,index) in obj'>{{index}}----{{val}}</li>
<li v-for='(val,ind) in arr'>{{ind}}====={{val}}</li>
</ul>
</div>
<div class="box1">
<ul>
<li v-for='val in arrs'>{{val.num}}={{val.name}}={{val.age}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<!--<script>
new Vue({
el: '.box',
data: {
arr: [1, 2, 3]
}
})
</script>-->
<!--<script>
new Vue({
el:'.box',
data:{
arr:[1,2,3],
obj:{name:'jia',age:12}
}
})
</script>-->
<!--<script>
new Vue({
el:'.box-bg',
data:{
obj:{name:'jia',age:12},
msg:'我想去看看'
}
})
</script>-->
<!--<script>
new Vue({
el:'.box-bg',
data:{
obj:{name:'j',age:12},
arr:[1,2,3]
}
})
</script>-->
<script>
new Vue({
el:'.box1',
data:{
mas:'hh',
arrs:[
{num:1,name:'jia',age:12},
{num:1,name:'jia',age:12},
{num:1,name:'jia',age:12}
]
}
})
</script>
</body>
</html>
v-for练习
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js[图片上传失败...(image-f1503d-1536653514426)]
ue.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>
