vue实战第一课：天气查询
查看天气界面如下：
-
index.html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>天气预报</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="wrap" id="app">
<div class="search_form">
<div class="logo"><img src="img/logo.png" alt="logo" /></div>
<div class="form_group">
<input type="text" class="input_txt" placeholder="请输入查询的天气"
v-model="city"
@keyup.enter="queryWeather" />
<button class="input_sub" @click="searchWeather()">
搜 索
</button>
</div>
<div class="hotkey">
<a href="javascript:;"
v-for="city in hotCitys"
@click="clickSearch(city)">{{ city }}</a>
</div>
</div>
<div class="weather_list">
<li v-for="item in weatherList">
<div class="info_type">
<span class="iconfont">{{ item.type }}</span>
</div>
<div class="info_temp">
<b>{{ item.low }}</b>
~
<b>{{ item.high }}</b>
</div>
<div class="info_date">
<span class="info_date">{{ item.date }}</span>
</div>
</li>
</div>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/main.js"></script>
</body>
</html>
2. main.js如下：
var app = new Vue({
el: "#app",
data: {
city: "北京",
weatherList: [],
hotCitys: ["北京", "上海", "广州", "深圳"]
},
methods: {
searchWeather: function() {
var that = this;
axios
.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`)
.then(response => (that.weatherList = response.data.data.forecast));
},
clickSearch:function(city) {
this.city = city;
this.searchWeather();
}
}
});