Vue---从后台获取数据vue-resource的使用方法
作為前端人員，在開發(fā)過程中，我們大多數(shù)情況都需要從后臺(tái)請(qǐng)求數(shù)據(jù)，那么在vue中怎樣從后臺(tái)獲取數(shù)據(jù)呢？接下來，我簡(jiǎn)單介紹一下vue-resource的使用方法，希望對(duì)大家有幫助。
一、下載vue-resource
1、npm install vue-resource --save -dev? ?
2、github:?https://github.com/pagekit/vue-resource
兩種方式都可以下載，根據(jù)自己喜好進(jìn)行選擇。
二、引入文件
引入vue.js和vue-resource.js，注意先后順序，先引vue.js。記住所有vue插件都需要在vue.js之后加載。
三、使用
我今天寫了一個(gè)小demo，比較簡(jiǎn)單。
1.HTML
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue-resource請(qǐng)求數(shù)據(jù)</title> 6 <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"> 7 <script src="../../node_modules/jquery/dist/jquery.js"></script> 8 <script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script> 9 <script src="../../node_modules/vue/dist/vue.js"></script> 10 <script src="../../node_modules/vue-resource/dist/vue-resource.js"></script> 11 12 </head> 13 <body> 14 <div class="row" id="paper" style="padding: 20px"> 15 <div class="col-lg-12 col-sm-12 col-xs-12"> 16 <div class="widget radius-bordered"> 17 <div class="widget-header bordered-bottom bordered-themeprimary"> 18 <span class="widget-caption">票據(jù)信息列表</span> 19 </div> 20 <div class="widget-body"> 21 <div class="query-form"> 22 <div class="row"> 23 <div class="form-group col-md-3"> 24 <input type="text" v-model="paperId"> 25 <div class="horizontal-space"></div> 26 </div> 27 28 <div class=" form-group col-md-1"> 29 <button @click="search()" type="button" class="btn btn-primary shiny">查詢</button> 30 <div class="horizontal-space"></div> 31 </div> 32 </div> 33 </div> 34 <div class="row"> 35 <table class="table table-bordered table-hover"> 36 <thead> 37 <tr> 38 <th>票據(jù)ID</th> 39 <th>分店</th> 40 <th>合作商</th> 41 <th>票據(jù)類型</th> 42 <th>票據(jù)編碼</th> 43 <th>票據(jù)金額</th> 44 </tr> 45 </thead> 46 47 <tbody> 48 <tr v-for="row in paperlist"> 49 <td>{{row.paperId}}</td> 50 <td>{{row.storeId}}</td> 51 <td>{{row.partnerId}}</td> 52 <td>{{row.paperClsNo}}</td> 53 <td>{{row.paperCode}}</td> 54 <td>{{row.paperAmt}}</td> 55 </tr> 56 </tbody> 57 </table> 58 </div> 59 60 61 </div> 62 </div> 63 </div> 64 </div> 65 66 </body>2.js
所有在頁面上綁定的數(shù)據(jù)都需要在data中聲明，否則報(bào)錯(cuò)。
1 <script> 2 var vm = new Vue({ 3 el: '#paper', 4 data: { 5 paperId: '', 6 paperlist: [] 7 }, 8 mounted:function() { //鉤子函數(shù) 9 this.get(); 10 }, 11 methods: { 12 get: function(){ 13 this.$http.get('data1.json', { 14 paperId: this.paperId 15 }).then( 16 function(res){ 17 this.paperlist = res.data; 18 console.log(this.paperlist); 19 },function(res){ 20 console.log(res.status); 21 }) 22 }, 23 24 search: function(){ 25 this.get(); 26 } 27 28 } 29 }) 30 </script>3.相關(guān)知識(shí)點(diǎn)
(1)鉤子函數(shù)
? ? ? 鉤子函數(shù)是Windows消息處理機(jī)制的一部分，通過設(shè)置“鉤子”，應(yīng)用程序可以在系統(tǒng)級(jí)對(duì)所有消息、事件進(jìn)行過濾，訪問在正常情況下無法訪問的消息。鉤子的本質(zhì)是一段用以處理系統(tǒng)消息的程序，通過系統(tǒng)調(diào)用，把它掛入系統(tǒng)。（百度百科）
對(duì)于前端來說，鉤子函數(shù)就是指再所有函數(shù)執(zhí)行前，我先執(zhí)行了的函數(shù)，即 鉤住 我感興趣的函數(shù)，只要它執(zhí)行，我就先執(zhí)行。
el被新創(chuàng)建的 vm.el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng)mounted被調(diào)用時(shí)vm.el替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果root實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng)mounted被調(diào)用時(shí)vm.el 也在文檔內(nèi)?
該鉤子在服務(wù)器端渲染期間不被調(diào)用。
(2)vue-resource 提供的便捷方法：
-
get(url, [data], [options]);
-
post(url, [data], [options]);
-
put(url, [data], [options]);
-
patch(url, [data], [options]);
-
delete(url, [data], [options]);
-
jsonp(url, [data], [options]);
都是接受三個(gè)參數(shù)：
-
url（字符串），請(qǐng)求地址?？杀籵ptions對(duì)象中url屬性覆蓋。
-
data（可選，字符串或?qū)ο?#xff09;，要發(fā)送的數(shù)據(jù)，可被options對(duì)象中的data屬性覆蓋。
-
options ?請(qǐng)求選項(xiàng)對(duì)象
便捷方法的POST請(qǐng)求：
1 this.$http.post( 2 'http://example.com', 3 // 請(qǐng)求體重發(fā)送數(shù)據(jù)給服務(wù)端 4 { 5 cat: 1, 6 name: 'newBook' 7 },{ 8 'headers': { 9 'Content-Type': 'x-www-form-urlencoded' 10 } 11 }).then(function () { 12 // 成功回調(diào) 13 }, function () { 14 // 失敗回調(diào) 15 });請(qǐng)求選項(xiàng)對(duì)象
option對(duì)象的各屬性及含義
| url | string | 請(qǐng)求的URL |
| method | string | 請(qǐng)求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法 |
| body | Object,FormDatastring | request body |
| params | Object | 請(qǐng)求的URL參數(shù)對(duì)象 |
| headers | Object | request header |
| timeout | number | 單位為毫秒的請(qǐng)求超時(shí)時(shí)間 (0 表示無超時(shí)時(shí)間) |
| before | function(request) | 請(qǐng)求發(fā)送前的處理函數(shù)，類似于jQuery的beforeSend函數(shù) |
| progress | function(event) | ProgressEvent回調(diào)處理函數(shù) |
| credentials | boolean | 表示跨域請(qǐng)求時(shí)是否需要使用憑證 |
| emulateHTTP | boolean | 發(fā)送PUT, PATCH, DELETE請(qǐng)求時(shí)以HTTP |
| emulateJSON | boolean | 將request body以application/x-www-form-urlencoded content type發(fā)送 |
?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)
總結(jié)
以上是生活随笔為你收集整理的Vue---从后台获取数据vue-resource的使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： d3dx10_42.dll是什么
- 下一篇： 体验 vue cli 3.0