1粤咪，
下載js庫 npm install vue
vue 相對(duì)于Angular React 來說是相對(duì)于容易學(xué)習(xí)的框架
vue 是由尤雨溪個(gè)人維護(hù)
vue 操作元素更方便 簡化了DOM
2槽卫，
v-for 對(duì)數(shù)組或?qū)ο筮M(jìn)行循環(huán)操作
需要哪個(gè)元素（HTML的標(biāo)簽）循環(huán)缓升，那么v-for就寫在那個(gè)元素上
使用v-for可以把obj的每個(gè)key對(duì)應(yīng)的value值遍歷出來疯趟，并且填到對(duì)應(yīng)的li元素中
v-for除了可以使用在數(shù)組上之外還可以應(yīng)用在對(duì)象上
3半沽，hello vue
每個(gè) Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個(gè)新的 Vue 實(shí)例開始的：
var vm = new Vue({
// 選項(xiàng)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="itany">
{{num}}
{{arr}}
{{msg}}
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
new Vue({
el:'.itany',
data:{
num:'abc',
arr:[1,2,3]
}
})
</script>
</body>
</html>
4婆跑，數(shù)組循環(huán)
<div class="text">
{{msg}}
<ul>
<li v-for='val in arr'>{{val}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({ //el element的縮寫 可以在Vue js里對(duì)dom元素進(jìn)行更改
el:'.text',//只要是選擇器皆可 id選擇器 class選擇器 各種選擇器
data:{
msg:'hello vue',
arr:[1,2,3]
}
})
</script>
5喘垂，table列表
<div id='itany'>
<table border='1' cellspacing='0'>
<thead>
<tr>
<th>編號(hào)</th>
<th>名稱</th>
<th>單價(jià)</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arr">
<td>{{index+1}}</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:[
{pname:'香蕉',price:3},
{pname:'蘋果',price:2},
{pname:'鴨梨',price:1}
]
}
})
</script> 