vue2获取天气和温度

在Vue2中，获取天气和温度通常会涉及到以下几个步骤：

1. **数据绑定**：首先，你需要在组件的data选项中定义两个变量来存储天气信息和温度，比如`weatherInfo`和`temperature`。

data() {
  return {
    weatherInfo: '',
    temperature: ''
  }
}

2. **API请求**：你可以利用JavaScript的fetch API或其他HTTP库（如axios）向天气预报服务发送GET请求，获取实时天气数据。例如，使用axios:

methods: {
  async getWeather() {
    try {
      const response = await axios.get('https://api.weather.com/weather')
      this.weatherInfo = response.data.weather;
      this.temperature = response.data.main.temp;
    } catch (error) {
      console.error(error);
    }
  }
}

3. **触发请求**：在需要显示天气的地方，比如按钮点击事件或者某个生命周期钩子（如mounted），调用`getWeather`方法。

4. **模板展示**：在模板（HTML）中使用`v-model`指令将数据绑定到DOM元素上，显示获取到的天气描述和温度：

<button @click="getWeather">获取天气</button>
<p>当前天气: {{ weatherInfo }}</p>
<p>温度: {{ temperature }}°C</p>