npm install vue 下載vue；
npm install jquery 下載jquery。
前端流行的三種框架：①vue ②angular ③react
vue是最容易學(xué)習(xí)的，是有個(gè)人維護(hù)的，操作元素最方便、簡化。
<div id='itany'>
{{msg}}
</div>
<script src="js/vue.js"></script>//倒入插件’
<script>
new Vue({ //element元素
el:'#itany',
data:{//寫數(shù)據(jù)
msg:'hello vue'
}
})
<div id="itany">
<ul>
循環(huán)數(shù)組：
<li v-for='value in arr'>{{value}}</li>
循環(huán)數(shù)組的索引：
<li v-for='(val,index) in arr'>{{index}}<={{val}}</li>
循環(huán)數(shù)組中的對象：
<li v-for='val in arrs'>{{val.num}}{{val.name}}{{val.age}}</li>
循環(huán)對象：
<li v-for='value in obj'>{{obj}}</li>
循環(huán)對象中的鍵：
<li v-for='(value,ind) in obj'>{{ind}}<={{value}}</li> </ul> </div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{//書寫數(shù)據(jù)
arr:[1,2,3,4,5,6]
arrs：[
{num：1，name：蘋果，age：3}，
{num：2，name：香蕉，age：4}，
{num：3，name：草莓，age：5}，
]
obj：{name：hei，age：20}
}
})
</script>
eg:
①：
*
1
*
2
*
3
*
4
*
5
*
6
②：
*
0->1
*
1->2
*
2->3
*
3->4
*
4->5
*
5->6
③：
*
1蘋果3
*
2草莓4
*
3葡萄5
④：
{ "name": " hei", "age": 20 }
⑤：
*
name- hei
*
age-20
用v-for建立表格:
<div id="itany">
<table border="1" cellspacing="0">
<thead>
<tr>
<th>編號</th>
<th>名稱</th>
<th>單價(jià)</th>
</tr>
</thead>
<tbody>
<tr v-for='value in arrs'>
<td>{{value.num}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
</tr>
</tbody>
</table>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
arr:[
{num:1,pname:'蘋果',price:2},
{num:2,pname:'香蕉',price:3},
{num:3,pname:'草莓',price:5}
]
}
})
</script>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。
