手把手教你做一個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);
},
}
刪除結束
