一、Vue是什么？
Vue 是一套用于构建用户界面的渐进式框架。
二、Vue入门——输出hellow Vue
<body>
<div id="new">
{{mag}}
{{age}}
{{arr}}
</div>
<script src="vue.js"></script>
<script>
new Vue({// Vue实例 可以存放数据 事例 方法
el:"#new",//选择器：id选择器-#id名 class名 标签
data:{// 用来存放数据
mag:'hello vue',
age:20,
arr:['你好''世界']
}
})
</script>
</body>
三、Vue指令
<div id="new">
<ul>
<li v-for="value in arr">{{value}}</li>
<li v-for="v in obj">{{v}}</li>
<li v-for="(val,ind) in arr">{{ind}}---{{val}}</li>
<li v-for="(val,ind) in obj">{{ind}}---{{val}}</li>
<li v-for="(val,ind) in arrs">
{{val.num}}
{{val.name}}
{{val.age}}
</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#new',
data:{
arr:['端木熙','杨敬华','神龙青阳'],
obj:{name:'程亦辰',age:20},
arrs:[
{
num:1,
name:"程亦辰",
age:20,
},
{
num:2,
name:"陆风",
age:23
}
]
}
})
</script>
其中Vue循环指令使用for循环，即v-for=“value（解析什么{{}}中写什么） in arr（循环什么in后面写什么）”
四、Vue表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="one">
<table border="1" cellspacing='0'>
<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.age}}</td>
</tr>
</tbody>
</table>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#one",
data:{
arrs:[
{
name:"程亦辰",
age:20,
},
{
name:"陆风",
age:23,
}
] ,
}
})
</script>
</body>
</html>
网友评论