vue 如何获取当前天气

要获取当前天气，你可以通过调用一些天气数据的API来实现。以下是一种获取当前天气的Vue.js的方法：

1. 在Vue.js项目中安装axios库，用于发送HTTP请求：

npm install axios

2. 在你的Vue组件中，导入axios库：

import axios from 'axios';

3. 创建一个方法来获取天气数据：

methods: {
  getWeather() {
    const apiKey = 'YOUR_API_KEY'; // 替换为你的API Key
    const apiUrl = 'https://api.weatherapi.com/v1/current.json'; // 替换为天气API的URL

    axios.get(apiUrl, {
      params: {
        key: apiKey,
        q: 'YOUR_LOCATION' // 替换为你想要查询的地点
      }
    })
    .then(response => {
      // 处理返回的天气数据
      console.log(response.data.current); // 打印当前天气信息
    })
    .catch(error => {
      console.error(error);
    });
  }
}

确保替换`YOUR_API_KEY`为你的天气API密钥，`YOUR_LOCATION`为你想要查询的地点。这个例子使用了WeatherAPI提供的API，你可以根据自己的需求选择合适的天气API。

4. 在你的模板中调用`getWeather()`方法来获取天气数据：

<button @click="getWeather">获取天气</button>

当用户点击按钮时，`getWeather()`方法将被触发，发送HTTP请求并获取到当前天气数据。你可以根据需要在模板中显示或使用这些数据。请记得替换按钮和数据的显示方式以适应你的项目需求。

请注意，这只是一种简单的示例，实际情况可能会因使用的天气API和具体需求而有所不同。请根据你选择的API和项目需求进行相应的调整。