刚开始接触vue.js，笨笨的我在网上自己找资料。看完vue的 v-model 及其点击事件后，写了一个小功能。
首先，由于想简便样式的书写，所以引用的bootstrap库。
<link rel="stylesheet" href="lib/bootstrap.min.css"> <script src="lib/jquery-1.7.2.js"></script> <script src="lib/bootstrap.js"></script> <script src="vue.js"></script>
然后我先用bootstrap把html代码书写出来。
<div class="container">
<form role="form">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" class="form-control" placeholder="输入用户名">
</div>
<div class="form-group">
<label for="age">年 龄:</label>
<input type="text" id="age" class="form-control" placeholder="输入年龄">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary">
<input type="button" value="重置" class="btn btn-danger">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h2 text-info">用户信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center">
<td>1</td>
<td>blue</td>
<td>50</td>
<td>
<button class="btn btn-primary btn-sm">删除</button>
</td>
</tr>
<tr class="text-center">
<td>1</td>
<td>strive</td>
<td>16</td>
<td>
<button class="btn btn-primary btn-sm">删除</button>
</td>
</tr>
<tr>
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm">删除全部</button>
</td>
</tr>
<tr>
<td colspan="4" class="text-center text-muted">
<p>暂无数据....</p>
</td>
</tr>
</table>
</div>
现在，让我们来用vueJs来完成这个功能，
首先：
new Vue({
el:'#box',
data:{
myData:[]
},
methods:{
}
});
我们用myData来存储我们的数据。 如果这个数据为空。则显示暂无数据，如果不为空，则显示表格，加载这里面的数据。我们需要用到 vueJs 的 v-show：
<tr v-show="myData.length != 0">
<td colspan="4" class="text-right">
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer">删除全部</button>
</td>
</tr>
<tr v-show="myData.length == 0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据....</p>
</td>
</tr>
这样，如果myData里面有数据。则不显示暂无数据表格。不然就显示删除全部按钮。
然后，我们如果有数据，则需要用v-for来加载数据。
<tr class="text-center" v-for="item in myData">
<td>{{$index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" >删除</button>
</td>
</tr>
接下来，我们需要向myData里面添加数据。这时，我们会用到数据的双向绑定功能。
data:{
myData:[],
username:"",
age:''
},
<input type="text" id="username" class="form-control" v-model="username" placeholder="输入用户名" >
<input type="text" id="age" class="form-control" v-model="age" placeholder="输入年龄" >
接下来，我们需要给添加按钮绑定事件。用 v-on:click=''；这里vue帮我们封装了点击事件的方法，可以用 @click=''来替代v-on:click；
<input type="button" value="添加" class="btn btn-primary" @click="add()" >
现在我们需要在js中 vue对象中添加这个add方法。获取到数据，并添加到myData里面。
methods:{
add:function(){
if(this.username!==""){
this.myData.push({
name:this.username,
age:this.age
});
}
this.username="";
this.age="";
}
}
这样，我们就完成了第一步。添加功能以及成功了。接下来，我们做删除功能。首先，点击删除时。我们需要获取当前的index，在vue中，数据的key值，我们可以直接用$index来获取。我们需要把获取到的这个$index保存起来。
data:{
myData:[],
username:"",
age:'',
nowIndex:"-200"
},
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=$index'">删除</button>
我们需要给弹窗口的确定删除按钮绑定时间。并把这个nowIndex传入到当前方法。
<button data-dismiss="modal" class="btn btn-danger btn-sm" @click="deletMsg(nowIndex)">确认</button>
现在，和刚才add时，在方法中添加deletMsg方法：
deletMsg:function(num){
this.myData.splice(num,1);
}
这样，我们的单个删除就做好了。最后，我们要做全部删除功能，点击全部删除时。我们需要把nowIndex重置为一个小于0的值。
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2">删除全部</button>
然后，在deletMsg方法中判断：
deletMsg:function(num){
if(num==-2){
this.myData=[];
}else{
this.myData.splice(num,1);
}
}
功能就做完了。但是，点击单个删除和全部删除时，提示内容需要改变。
data:{
myData:[],
username:"",
age:'',
nowIndex:"-200",
msg:"你确定要删除么?"
},
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=$index,msg='你确定要删除么？'">删除</button>
<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=-2,msg='你确定要全部删除么？'">删除全部</button>
<h4 class="modal-title">{{msg}}</h4>
这样，我们这个功能就做完了。