1.Vue：Vue.js（讀音 /vju?/, 類似于 view）是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架。Vue.js 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動(dòng)。
2.下載Vue? 輸入指令 ump install vue，下載完畢之后出現(xiàn)文件夾即可
3.vue內(nèi)容:
? ? ?? new Vue({ //element元素
? ? ? ? ? ? el:'#itany',
? ? ? ? ? ? data:{//寫數(shù)據(jù)
? ? ? ? ? ? ? ? table
?? ? })
4.循環(huán)數(shù)組：
div:
<div id="mingzi">
<ul>
<li v-for="a in arr">{{a}}</li>
</ul>
</div>
js:
new Vue({
el:'#mingzi',
data:{
arr:[1,2,3]
}
})
5.循環(huán)對(duì)象：
div:
<div id="mingzi">
<ul>
<li v-for="a in obj"><<a>></li>
</ul>
</div>
js:
new Vue({
el:'#mingzi',
data:{
obj:{name:"社會(huì)王",age:"18歲"}
}
})
6.循環(huán)下標(biāo)：
div:
<div id="mingzi">
<li v-for="(a,index) in arr"><<a>><<index>></li>
</ul>
</div>
js:
new Vue({
el:'#mingzi',
data:{
arr:[1,2,3]
}
})
7.循環(huán)表格：
div:
<div id ="itany">
<table>
<thead>
<tr>
<th>編號(hào)</th>
<th>名稱</th>
<th>單價(jià)</th>
</tr>
</thead>
<table>
<tr v-for="(value,index) in arr">
? ? ? ? ? ? ? ? <td>{{index+1}}</td>
? ? ? ? ? ? ? ? ? <td>{{value.pname}}</td>
? ? ? ? ? ? ? ? ? <td>{{value.price}}</td>
</tr>
</table>
</table>
</div>
js:
new Vue({
el:'#itany',
data:{
? ? arr:[
? ? ? ? ? ? ? ? ? ? ? ? {pname:"葡萄",price:1},
? ? ? ? ? ? ? ? ? ? ? ? {pname:"香蕉",price:2},
? ? ? ? ? ? ? ? ? ? ? ? {pname:"蘋果",price:3},
? ? ? ? ? ? ? ? ? ? ? ]
}
})
