首先列表內容還是與之前的列表內容類似，不過此處我們會采用Vue中數據請求的方式來實現數據的增刪。那么我們使用的Vue第三方組件就是vue-resource，vue發起請求的方式與jQuery的ajax相似，組要是請求地址與參數。和方法
首先我們先看到的是列表請求
獲取列表
<table class=" table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>CTime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td><a href="#" @click.prevent="del(item.id)">刪除</a></td>
</tr>
</tbody>
</table>
在methods中獲取到的加入獲取數據的list方法，使用get請求
getList(){
this.$http.get('list').then(result=>{
var result =result.body;
if(result.code ===200){
this.list = result.data
}else{
alert("獲取數據失敗");
}
})
},
需要注意的是，使用vue-resource的請求獲取的數據，都封裝在回調數據的body域中，同時我們需要在Vue組件的created生命周期函數中加入使用該方法來渲染頁面
created(){
//在其他方法中調用定義的方法使用this關鍵字
this.getList();
},
增加和刪除元素的方法與此類似，這里給出詳細代碼，不做講解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<div class="panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:<input type="text" v-model="id" class="form-control" />
</label>
<label>
Name:
<input type="text" v-model="title" class="form-control" />
</label>
<label>
關鍵字
</label>
<input type="text" v-model="description" class="form-control"/>
<input type="button" value="添加" class="btn btn-primary" @click="add()"/>
</div>
</div>
<table class=" table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>CTime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td><a href="#" @click.prevent="del(item.id)">刪除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
id:"",
title:"",
description:"",
list:[],
},
created(){
this.getList();
},
methods:{
getList(){
this.$http.get('http://localhost:8080/list').then(result=>{
var result =result.body;
if(result.code ===200){
this.list = result.data
}else{
alert("獲取數據失敗");
}
})
},
add(){
this.$http.post('http://localhost:8080/submit',{id:this.id,title:this.title,description:this.description},{emulateJSON:true}).then(result=>{
var result =result.body;
if(result.code ===200){
this.getList();
}else{
alert("獲取數據失敗");
}
})
},
del(id){
this.$http.get('http://localhost:8080/del/'+id,{emulateJSON:true}).then(result=>{
var result =result.body;
if(result.code ===200){
this.getList();
}else{
alert("獲取數據失敗");
}
})
}
}
})
</script>
</body>
</html>
上述代碼中有兩個地方略顯啰嗦，第一個是url，第二個是傳遞Json數據之后對json的處理，vue-resource 提供了兩個簡化的操作，
url簡化
我們可以在定義Vue對象之前使用
Vue.http.options.root="http://localhost:8080/";
來定義請求的基礎url，然后直接使用請求本身的url就可以了，但是需要注意的是兩段url連接起來之后，不允許出現‘//’,否則會出問題，一般我會采用基礎url最后多‘/’,而自定義的url則無
還有一個是對傳遞數據的參數的簡化，
我們可以在定義Vue對象之前使用
Vue.http.options.emulateJSON = true;
這樣我們在請求時即可默認有此參數，請求的時候就不用加上這個參數了。
經過簡化，上述代碼被簡化為
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="lib/vue-2.4.0.js" ></script>
<script type="text/javascript" src="lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css" />
</head>
<body>
<div id="app">
<div class="panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:<input type="text" v-model="id" class="form-control" />
</label>
<label>
Name:
<input type="text" v-model="title" class="form-control" />
</label>
<label>
關鍵字
</label>
<input type="text" v-model="description" class="form-control"/>
<input type="button" value="添加" class="btn btn-primary" @click="add()"/>
</div>
</div>
<table class=" table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>CTime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{item.title}}</td>
<td>{{item.description}}</td>
<td><a href="#" @click.prevent="del(item.id)">刪除</a></td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.http.options.root="http://localhost:8080/";
Vue.http.options.emulateJSON = true;
var vm = new Vue({
el:'#app',
data:{
id:"",
title:"",
description:"",
list:[],
},
created(){
this.getList();
},
methods:{
getList(){
this.$http.get('list').then(result=>{
var result =result.body;
if(result.code ===200){
this.list = result.data
}else{
alert("獲取數據失敗");
}
})
},
add(){
console.log("1");
this.$http.post('submit',{id:this.id,title:this.title,description:this.description}).then(result=>{
var result =result.body;
if(result.code ===200){
this.getList();
}else{
alert("獲取數據失敗");
}
})
},
del(id){
console.log(2);
this.$http.get('del/'+id).then(result=>{
var result =result.body;
if(result.code ===200){
this.getList();
}else{
alert("獲取數據失敗");
}
})
}
}
})
</script>
</body>
</html>
此案例后台為我使用mybatis和springboot所做的簡單后台，大家也可以自行操作。