Introduction to Vue Resource

Vue Resource is a Vue.js plugin that provides HTTP client functionality for making web requests, similar to jQuery's AJAX methods. It supports various HTTP methods and JSONP requests.

Supported HTTP Methods

The plugin provides shorthand methods for common HTTP opertaions:

• get: {method: 'GET'}
• save: {method: 'POST'}
• query: {method: 'GET'}
• update: {method: 'PUT'}
• remove: {method: 'DELETE'}
• delete: {method: 'DELETE'}

Installation Methods

Script Tag Inclusion

<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

Module Import (ES6)

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

CommonJS Module

const Vue = require('vue');
const VueResource = require('vue-resource');

Vue.use(VueResource);

Basic Usage Examples

Resource Instance Creation

const apiResource = this.$resource('api/items{/id}');

GET Request Example

{
  this.$http.get('/api/data').then(
    (successResponse) => {
      // Handle successful response
    },
    (errorResponse) => {
      // Handle error response
    }
  );
}

Weather API Example with JSONP

fetchWeatherData() {
  this.$http.jsonp(this.apiUrl)
    .then((response) => {
      if (response) {
        this.weatherData = response.data.results[0];
      }
    }, (error) => {
      console.log('Request failed');
    });
}

Common Rendering Issue and Solution

A common problem occurs when copmonent rendering happens before API data is received. Without proper conditional rendering, this causes errors when accessing undefined data properties.

Problematic Template (Without Conditional Rendering)

<template>
<ul class="weather-display">
  <li>
    <h3>{{weatherData.currentCity}}</h3>
    | pm2.5: {{weatherData.pm25}}
  </li>
  <li>
    <ul>
      <li v-for="day in weatherData.weather_data">
        <p>{{day.date}}</p>
        <p>
          <img :src="day.dayPictureUrl">
          <img :src="day.nightPictureUrl">
        </p>
        <p>{{day.weather}}</p>
        <p>{{day.wind}}</p>
        <p>{{day.temperature}}</p>
      </li>
    </ul>
  </li>
</ul>
</template>

Solution with Conditional Rendering

<template>
  <ul class="weather-display" v-if="weatherData">
    <li>
      <h3>{{weatherData.currentCity}}</h3>
      | pm2.5: {{weatherData.pm25}}
    </li>
    <li>
      <ul>
        <li v-for="day in weatherData.weather_data" @click="toggleDetails">
          <p>{{day.date.slice(0,10)}}</p>
          <p>
            <img :src="day.dayPictureUrl">
            <img :src="day.nightPictureUrl">
          </p>
          <p>{{day.weather}}</p>
          <p>{{day.wind}}</p>
          <p>{{day.temperature}}</p>
        </li>
      </ul>
    </li>
  </ul>
  
  <div class="loading-indicator" v-else>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: 'http://api.map.baidu.com/telematics/v3/weather?location=Shanghai&output=json&ak=YOUR_API_KEY',
      weatherData: null
    }
  },
  created() {
    this.fetchWeatherData();
  },
  methods: {
    fetchWeatherData() {
      this.$http.jsonp(this.apiUrl)
        .then((response) => {
          if (response) {
            this.weatherData = response.data.results[0];
          }
        }, (error) => {
          console.error('Request failed');
        });
    },
    toggleDetails(event) {
      const listItem = event.currentTarget;
      if (listItem.nodeName === 'LI') {
        listItem.classList.toggle('expanded');
      }
    }
  }
}
</script>

Always implement both success and error callback handlers to ensure robust application behavior.