手把手教你做一个VUE纯单页面的，静态的增删改查
1.工具
idea
vue需要的三个js文件
vue.js vue最基础的js文件
qs.js后台传参时需要进行转换（此处单页面，不进行后台传参，所以不需要）
axios.js 发送路径
步骤1：
首先建一个vuetest.html文件，导入需要的js文件
如图：我的项目结构：
导入需要的js文件
<script src="../vueJs/vue.js"></script>
查询
body中
<div id="app">
<table border="1">
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<!--遍历： list为在data中定义的数组名字 item为字段名，index为下标-->
<tr v-for="(item,index) in list" >
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<input type="button" v-on:click="update(index,item)" value="修改">
<input type="button" v-on:click="del(index)" value="删除">
</td>
</tr>
</table>
</div>
script中
new Vue({
//所有的vue的操作，都必须放到这个id="app" 的div中，否则，vue用不了
el:"#app",
data:{
//存放要查询的数据集合（动态的这里直接写一个空集合，就可以使用了）
list:[
{name:"张三",age:22},
{name:"李四",age:11},
{name:"王五",age:26},
{name:"aaa",age:33}
],
},
})
查询完成了
新增
姓名： <input type="text" v-model="name" id="name"/>
年龄： <input type="text" v-model="age" id="age"/>
<input type="button" v-on:click="add()" value="增加">
new Vue({
el:"#app",
data:{
//与v-model中的必须保持一致
name:"",
age:"",
list:[
{name:"张三",age:22},
{name:"李四",age:11},
{name:"王五",age:26},
{name:"aaa",age:33}
],
},
methods:{
add:function(){
//直接通过this.name就可以获取到文本框中name的值
// alert(this.name);
// alert(this.age);
//定义一个键值对的json，通过list的push方法增加到list中数据
var user = {name:this.name,age:this.age}
this.list.push(user);
},
}
})
增加结束
修改
姓名： <input type="text" v-model="name" id="name"/>
年龄： <input type="text" v-model="age" id="age"/>
<input type="button" v-on:click="updateUser()" value="修改">
<table border="1">
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<!--遍历： list为数组名字 item为字段名，index为下标-->
<tr v-for="(item,index) in list" >
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<input type="button" v-on:click="update(index,item)" value="修改">
<input type="button" v-on:click="del(index)" value="删除">
</td>
</tr>
</table>
new Vue({
el:"#app",
data:{
nameJiLian:"",
name:"",
age:"",
//存放当前行的唯一标识
indexVal:"",
list:[
{name:"张三",age:22},
{name:"李四",age:11},
{name:"王五",age:26},
{name:"aaa",age:33}
],
},
methods:{
//回显
toUpdate:function(index){
// alert(index);
// alert(item.name);
//通过this可直接获取到文本框中name个age值，并进行回显，index是当前行的唯一标识
this.name = this.list[index].name;
this.age = this.list[index].age;
this.indexVal = index;
//alert( this.indexVal);
},
//修改
updateUser:function(index) {
//获取到所有对象，以键值进行存储
var user = {name:this.name,age:this.age};
//获取当前唯一标识
var indexVal = this.indexVal;
// alert(indexVal);
//给list集合下标为indexVal的所对应的赋值
this.list[this.indexVal].name = this.name;
this.list[this.indexVal].age = this.age;
//修改结束，将所有文本框置空
this.name="";
this.age="";
this.indexVal="";
}
}
})
回显
修改后
删除
div中
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
<!--遍历： list为数组名字 item为字段名，index为下标-->
<tr v-for="(item,index) in list" >
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<input type="button" v-on:click="update(index,item)" value="修改">
<input type="button" v-on:click="del(index)" value="删除">
</td>
</tr>
</table>
script
methods:{
//需要传一个参数过来。也就是当前数据的唯一标识
del:function(index){
// alert("删除");
//用list的splice方法，第一个参数：从那个开始删除，第二个参数：删除几条数据
this.list.splice(index,1);
},
}
删除结束
