前端流行的框架：vue Angular React
vue是最容易學習的 是由個人維護的 操作元素最方便 簡化dom操作
Vue.js的作者為Evan You（尤雨溪），曾任職于Google Creative Lab，雖然是Vue是一個個人項目勺爱，但在發(fā)展前景上個人認為絕不輸于Google的AngularJs，下面我會將Vue與Angular（Angular 1.0+版本）做一些簡單的比較才顿。
Vue的主要特點就和它官網(wǎng)（http://cn.vuejs.org/）所介紹的那樣：
（1） 簡潔 （2） 輕量 （3）快速 （4） 數(shù)據(jù)驅動 （5） 模塊友好 （6） 組件化
<div class="box">
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box" // el:element元素 獲取選擇器
data: { // 寫數(shù)據(jù)
msg："hello worder"
}
})
</script>
1.v-for遍歷數(shù)組
(1)value in arr 遍歷數(shù)組中的元素
(2)(value,index) in arr 遍歷數(shù)組中的元素和數(shù)組下標
2.v-for遍歷obj對象
(1)value in obj 遍歷obj對象中的值
(2)(value,key) in obj 遍歷obj對象中的值和鍵
(3)(value,key,index) in obj 遍歷obj對象中的值、鍵和索引
循環(huán)數(shù)組
<div class="box">
<ul>
<li v-for="value in arr">{{value}}</<li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
data: { // 寫數(shù)據(jù)
arr:[1,2,3,4,5]
}
})
循環(huán)obj
<ul>
<li v-for="value in obj">{{value}}</<li>
</ul>
<script src="js/vue.js"></script>
<script>
new Vue({
data: { // 寫數(shù)據(jù)
obj:{name:"jack",age;18}
}
})
循環(huán)數(shù)組索引
<ul>
<li v-for="(val,index) in arr">{{index}}={{val}}</li>
</ul>
<script src="js/vue.js"></script>
<script>
new Vue({
data: { // 寫數(shù)據(jù)
arr:[1,2,3,4,5]
}
})
循環(huán)obj的鍵
<ul>
<li v-for="(val,index) in obj">{{index}}={{val}}</li>
</ul>
<script src="js/vue.js"></script>
<script>
new Vue({
data: { // 寫數(shù)據(jù)
obj:{name:"jack",age:18}
}
})
循環(huán)數(shù)組中的對象
<ul>
<li v-for="value in arrs">{{value.name <http://value.name/>}}{{value.age}}</li>
</ul>
<script src="js/vue.js"></script>
<script>
new Vue({
data: { // 寫數(shù)據(jù)
arrs:[
{name:"蘋果",age:8},
{name:"李子",age:12},
{name:"提子",age:18}
]
}
})
建立一個表格 書寫中不帶有編號 但在瀏覽器中顯示編號
<table border="1" bordercolor="black" cellspacing="0" >
<thead>
<tr>
<td>編號</td>
<td>名字</td>
<td>價格</td>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arrs">
<td>{{index+1}}</td>
<td>{{value.name <http://value.name/>}}</td>
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
<style>
table{
width:300px;
text-align: center;
}
</style>
<script src="js/vue.js"></script>
<script>
new Vue({
data: { // 寫數(shù)據(jù)
arrs:[
{name:"蘋果",age:8},
{name:"李子",age:12},
{name:"提子",age:18}
]
}
})
建立一個表格 書寫編號 瀏覽器中也可以看到編號
<table border="1" bordercolor="black" cellspacing="0" >
<thead>
<tr>
<td>編號</td>
<td>名字</td>
<td>價格</td>
</tr>
</thead>
<tbody>
<tr v-for="value in arrs">
<td>{{value.num}}</td>
<td>{{value.name <http://value.name/>}}</td>
<td>{{value.age}}</td>
</tr>
</tbody>
</table>
<style>
table{
width:300px;
text-align: center;
}
</style>
<script src="js/vue.js"></script>
<script>
new Vue({
data: { // 寫數(shù)據(jù)
arrs:[
{num:1,name:"蘋果",age:8},
{num:2,name:"李子",age:12},
{num:3,name:"提子",age:18}
]
}
})
