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軟件
學(xué)習(xí)了git軟件 輸出 “npm install vue ”
自動下載了vue.js
3.v-for循環(huán)
<script src="vue.js/vue.js"></script>
<div id="myapp">
<ul>
<li v-for="(value,index) in arr"> <!--value是值愿伴，index是下標(biāo)-->
{{index}}=>{{value}} <!--value和index可以改變-->
</li>
<li v-for="a in obj">
{{a}}
</li>
</ul>
</div>
<script>
new Vue({//vue實例
el:'#myapp',//element選擇器簡稱
data:{ //data數(shù)據(jù) 數(shù)據(jù)里不能放函數(shù)
arr:[1,2,3],
obj:{
name:'jack',
age:18
}
}
})
</script>
4.數(shù)組對象
<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>
