1.hellow Vue.js
显示“hellow Vue.js world”
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="myapp">
{{message}}
</div>
<script>
var mtapp = new Vue({
el:'#myapp',
data:{
message:'hello vue.js world!'
}
})
</script>
</body>
</html>
2.git软件
学习了git软件 输出 “npm install vue ”
自动下载了vue.js
3.v-for循环
<script src="vue.js/vue.js"></script>
<div id="myapp">
<ul>
<li v-for="(value,index) in arr"> <!--value是值，index是下标-->
{{index}}=>{{value}} <!--value和index可以改变-->
</li>
<li v-for="a in obj">
{{a}}
</li>
</ul>
</div>
<script>
new Vue({//vue实例
el:'#myapp',//element选择器简称
data:{ //data数据 数据里不能放函数
arr:[1,2,3],
obj:{
name:'jack',
age:18
}
}
})
</script>
4.数组对象
<script src="vue.js/vue.js"></script>
<div id="myapp">
<ul>
<li v-for="a in arrs">
{{a.name}} <!--选择arrs中的name -->
{{a.age}} <!--选择arrs中的age -->
</li>
</ul>
</div>
<script>
new Vue({//vue实例
el:'#myapp',//element选择器简称
data:{
arrs:[
{
name:'jack',
age:18
},
{
name:'rose',
age:18
}
]
}
})
5.表格
<script src="vue.js/vue.js"></script>
<div id="arr">
<table border=1 cellspacing="0">
<thead>
<tr>
<th>编号</th> // th加粗
<th>名称</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) in fruit">
<td>{{i+1}}</td>
<td>{{v.name}}</td>
<td>{{v.price}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#arr',
data:{
fruit:[
{
name:'apple',
price:'3'
},
{
name:'banana',
price:"2"
},
{
name:"pig",
price:"200"
}
]
}
})
</script>
网友评论