使用vue写一个天气预报页面

好的，以下是一个简单的天气预报页面的 Vue 代码示例：

<template>
  <div>
    <h1>{{ city }}天气预报</h1>
    <div class="weather">
      <div class="temperature">{{ temperature }}℃</div>
      <div class="condition">{{ condition }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: '北京',
      temperature: '',
      condition: ''
    }
  },
  mounted() {
    this.getWeather()
  },
  methods: {
    async getWeather() {
      try {
        const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${this.city}&appid=YOUR_API_KEY&units=metric&lang=zh_cn`)
        const data = await response.json()
        this.temperature = Math.round(data.main.temp)
        this.condition = data.weather[0].description
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>
.weather {
  display: flex;
  align-items: center;
}

.temperature {
  font-size: 5rem;
  margin-right: 2rem;
}

.condition {
  font-size: 2.5rem;
}
</style>

在这个示例中，我们使用了一个 API 来获取天气数据，这个 API 是 OpenWeatherMap 提供的，需要自己注册并获取 API KEY。在 mounted 阶段调用 getWeather 方法来获取天气数据，并将数据渲染到页面上。

希望这个示例对你有所帮助！