1.安装git，通过npm install vue下载vue插件
$ npm install vue
2.通过script导入vue.js插件
<script src="vue/dist/vue.js"></script>
3.然后再通过另一个script新建一个用来编写vue.js的区域
<script>
new Vue({
el:'.demo',
data:{
demo1:'前端1班',
arr:[1,2,3,4],
obj:{name:"大伟",age:"25",hobby:"足球"},
arrs:[
{name:"小红",age:"20",hobby:"睡觉"},
{name:"小黄",age:"21",hobby:"看书"},
{name:"小绿",age:"22",hobby:"打游戏"}
]
}
})
</script>
4.通过new Vue创建一个vue对象，el的值可以是选择器，ID选择器，class选择器等均可，data用来存放数据
<div class="demo">
.....
</div>
new Vue({
el:'.demo'
data:{
demo1:'前端1班',
arr:[1,2,3,4],
obj:{name:"顾大伟",age:"25",hobby:"足球"},
arrs:[
{name:"小红",age:"20",hobby:"睡觉"},
{name:"小黄",age:"21",hobby:"看书"},
{name:"小绿",age:"22",hobby:"打游戏"}
]
}
})
注：new Vue中Vue开头必须为大写字母
5.vue中的for循环，是通过v-for来实现的
HTML:
<dl>
<dt v-for="val in arr">{{val}}</dt>
</dl>
<ul>
<li v-for="ao in obj">{{ao}}</li>
</ul>
vue.js:
<script>
new Vue({
el:'.demo',
data:{
arr:[1,2,3,4],
obj:{name:"顾大伟",age:"25",hobby:"足球"},
}
})
</script>
6.通过vue制作table表格
（1）通过vue实现：
HTML:
<div class="demo">
<table border="1" cellspacing='0'>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arrs">
<td>{{value.name}}</td>
<td>{{value.age }}</td>
<td>{{value.hobby}}</td>
</tr>
</tbody>
</table>
</div>
vue.js:
<script>
new Vue({
el:'.demo',
data:{
arrs:[
{name:"小红",age:"20",hobby:"睡觉"},
{name:"小黄",age:"21",hobby:"看书"},
{name:"小绿",age:"22",hobby:"打游戏"}
]
}
})
</script>
效果图如下：
| 姓名 | 年龄 | 爱好 |
|---|---|---|
| 小红 | 20 | 睡觉 |
| 小黄 | 21 | 看书 |
| 小绿 | 22 | 打游戏 |
通过下标来实现年龄：
HTML:
<div class="demo">
<table border="1" cellspacing='0'>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr v-for="(value,index) in arrs">
<td>{{value.name}}</td>
<td>{{index+20}}</td>
<td>{{value.hobby}}</td>
</tr>
</tbody>
</table>
</div>
vue.js:
<script>
new Vue({
el:'.demo',
data:{
arrs:[
{name:"小红",age:"20",hobby:"睡觉"},
{name:"小黄",age:"21",hobby:"看书"},
{name:"小绿",age:"22",hobby:"打游戏"}
]
}
})
</script>
效果图如下：
| 姓名 | 年龄 | 爱好 |
|---|---|---|
| 小红 | 20 | 睡觉 |
| 小黄 | 21 | 看书 |
| 小绿 | 22 | 打游戏 |
