划重点使用vue-resource.js库 进行网络请求操作POST : this.$http.post ( … )GET : this.$http.get ( … )小鸡炖蘑菇!DOCTYPEhtmlhtml langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatiblecontentieedgescript src./lib/vue-2.6.10.js/script!--script srchttps://cdn.jsdelivr.net/npm/vue-resource1.5.1/script--script src./lib/vue-resource.js/scripttitleDocument/title/headbodydiv idapptableclasstable table-bordered table-hover table-stripedtheadtrthId/ththName/ththCtime/ththOperation/th/tr/theadtbodytr v-showflagv-foritem in list:keyitem.idtd{{item.id}}/tdtd{{item.name}}/tdtd{{item.ctime}}/tdtda hrefhttp://www.baidu.comclick.preventdel删除/a/td/tr/tbody/table/divscriptVue.http.options.roothttp://jsonplaceholder.typicode.com/;//全局配置根 地址Vue.http.options.emulateJSONtrue;varvmnewVue({el:#app,data:{flag:false,//默认没有加载完成数据的情况下不显示list:[{id:1,name:奔驰,ctime:newDate()},{id:2,name:法拉利,ctime:newDate()}]},created(){this.testUrl();},methods:{del(){alert(22344578);},testUrl(){// 前端服务器测试用的万能地址http://jsonplaceholder.typicode.com/users//POST// this.$http.post(http://jsonplaceholder.typicode.com/users).then(response {// alert(Post传统请求成功);// }, response {// alert(Post请求失败);// })// GET /someUrlthis.$http.get(users).then(response{this.flagtrue;// get body datathis.listresponse.body;alert(this.list333)});// 传统写法// this.$http.get(http://jsonplaceholder.typicode.com/users).then(function (response) {// alert(传统请求成功);// // 响应成功回调// }, function (response) {// // 响应错误回调// alert(传统请求失败);// });}}})/script/body/html网络请求结果的效果图
划重点使用vue-resource.js库 进行网络请求操作POST : this.$http.post ( … )GET : this.$http.get ( … )小鸡炖蘑菇!DOCTYPEhtmlhtml langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatiblecontentieedgescript src./lib/vue-2.6.10.js/script!--script srchttps://cdn.jsdelivr.net/npm/vue-resource1.5.1/script--script src./lib/vue-resource.js/scripttitleDocument/title/headbodydiv idapptableclasstable table-bordered table-hover table-stripedtheadtrthId/ththName/ththCtime/ththOperation/th/tr/theadtbodytr v-showflagv-foritem in list:keyitem.idtd{{item.id}}/tdtd{{item.name}}/tdtd{{item.ctime}}/tdtda hrefhttp://www.baidu.comclick.preventdel删除/a/td/tr/tbody/table/divscriptVue.http.options.roothttp://jsonplaceholder.typicode.com/;//全局配置根 地址Vue.http.options.emulateJSONtrue;varvmnewVue({el:#app,data:{flag:false,//默认没有加载完成数据的情况下不显示list:[{id:1,name:奔驰,ctime:newDate()},{id:2,name:法拉利,ctime:newDate()}]},created(){this.testUrl();},methods:{del(){alert(22344578);},testUrl(){// 前端服务器测试用的万能地址http://jsonplaceholder.typicode.com/users//POST// this.$http.post(http://jsonplaceholder.typicode.com/users).then(response {// alert(Post传统请求成功);// }, response {// alert(Post请求失败);// })// GET /someUrlthis.$http.get(users).then(response{this.flagtrue;// get body datathis.listresponse.body;alert(this.list333)});// 传统写法// this.$http.get(http://jsonplaceholder.typicode.com/users).then(function (response) {// alert(传统请求成功);// // 响应成功回调// }, function (response) {// // 响应错误回调// alert(传统请求失败);// });}}})/script/body/html网络请求结果的效果图
