學習筆記02--vue-resource基礎

學習筆記02–vue-resource基礎

1. vue-resource的配置步驟：直接在html頁面中，通過script標籤引入‘vue-resource’的腳本文件；（注意引用先後順序：先引用Vue的腳本文件，再引用‘vue-resource’的腳本文件）
2. 發送get請求：

this.$http.get('請求地址').then(res => {
    console.log(res.body);  //成功的回調函數
  })
 

3. 發送post請求：post有三個參數：參數1：要請求的URL地址；參數2：要發送的數據對象；參數3：一個配置對象，這裏是指定post提交的編碼類型爲 application/x-www-form-urlencoded，即普通表單格式

 this.$http.post('請求地址, { 數據對象 }, { emulateJSON: true }).then(res => {
    console.log(res.body);    //成功的回調函數
  });

4. 發送JSONP請求獲取數據：

jsonpInfo() { // JSONP形式從服務器獲取數據
  var url = '請求地址';
  this.$http.jsonp(url).then(res => {  //成功的回調函數
    console.log(res.body);
  });
}
   

5. 全局配置數據接口的根目錄：

<script>
Vue.http.options.root = 'http://vue.my.io/';
var vm = new Vue({
el..代碼省略
data...代碼省略
methods: {
 add() {//添加品牌列表到後臺服務器
  this.$http.post('api/add', {name: this.name}, {emulateJSON: true}).then(result => {  //成功的回調函數      )}
</script>

6. 全局啓用emulateJSON對象，直接在全局敲
   Vue.http.options.emulateJSON = true;
   如果在全局設置了該語句，則可以不用設置post的第三個屬性
   注意：如果通過全局配置設置了請求的數據接口–根域名，則每次單獨發起http請求時，請求的url路徑，應該以相對路徑開頭，前面不能帶/，否則不會啓用根路徑做拼接