vue的get和post需要兩個文件vue.js和vue-resource.js
以下是實現的代碼，可以參考一下，需要注意的接口的請求需要考慮跨域的問題，其次就是訪問頁面需要在tomcat下訪問，否則也會報跨域的問題
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>test</title>
<meta name="author" content="xiewg@cebserv.com" />
<meta name="copyright" content="www.doyoe.com" />
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/jquery.min.js"></script>
<style>
p~p{color:#f00;}
</style>
</head>
<body>
<div id="app">
<table>
<tr v-for="item in message">
<td>{{item.expertId}}</td>
<td>{{item.categoryName}}</td>
</tr>
</table>
<button v-on:click="greet">get</button>
<button v-on:click="postgreet">post</button>
</div>
<script type="text/javascript">
//var books={[]};
//{
// [
// {"id":1,"author":"曹雪芹","name":"紅樓夢","price":32},
// {"id":2,"author":"施耐庵","name":"水滸傳","price":30},
// {"id":"3","author":"羅貫中","name":"三國演義","price":24},
// {"id":4,"author":"吳承恩","name":"西游記","price":20}
// ]
//}
new Vue({
el: '#app',
data:{
message: [
{"id":1,"author":"曹雪芹","name":"紅樓夢","price":32},
{"id":2,"author":"施耐庵","name":"水滸傳","price":30},
{"id":"3","author":"羅貫中","name":"三國演義","price":24},
{"id":4,"author":"吳承恩","name":"西游記","price":20}
]
},
created: function () {
//this.greet();
},
ready:function(){
// this.greet();
},
methods:{
greet: function (event) {
//`this` 在方法里指向當前 Vue 實例
this.$http.get('http://172.16.1.218:58080/API/app/expertCategory/getQuestionList?expertCategoryId=2').then(function(data){
//this.books=data.body.data;
alert(data.body.returnCode);
this.message=data.body.resultData;
//this.$set('books', data.body);
},function(res){
console.log(res.status);
});
//alert('Hello ' + this.book + '!')
//`event` 是原生 DOM 事件
// if (event) {
// alert(event.target.tagName)
// }
},
postgreet: function (event) {
//`this` 在方法里指向當前 Vue 實例
this.$http.post('http://localhost:8080/customer/getCustomer',{param:1111}).then(function(data){
//this.books=data.body.data;
alert(data.body.message);
//this.message=data;
this.greet();
},function(res){
console.log(res.status);
});
//alert('Hello ' + this.book + '!')
//`event` 是原生 DOM 事件
// if (event) {
// alert(event.target.tagName)
// }
},
}
})
</script>
</body>
</html>