跟着教程做了一个有查询天气功能的页面(很简陋)
网页中有搜索栏可以搜索各城市,点击按钮或回车可搜索天气,下面有热门城市可选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div id="1">
<input type="text" v-model="city" @keyup.enter="searchWeather" placeholder="请输入查询数据">
<button @click="searchWeather"> 搜索一下🔍</button>
</div>
<div id="2">
<a href="javascript:;" @click="changeCity('北京')">北京</a>
<a href="javascript:;" @click="changeCity('上海')">上海</a>
<a href="javascript:;" @click="changeCity('广州')">广州</a>
<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
</div>
<div id="3">
{{message}}
</div>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- axios的在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 自己的js -->
<script src="./天知道main.js"></script>
</body>
</html>
js端的代码
// 1.点击回车
// 2.查询数据
// 3.渲染数据
var app = new Vue({
el: "#app",
data: {
city: '',
message: ''
},
methods: {
searchWeather: function () {
// console.log("tnz nb 666");
// console.log(this.city);
//调用接口
var that = this;
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='
+ this.city)
.then(function (response) {
// console.log(response);
console.log(response.data.data.forecast);
that.message = response.data.data.forecast[0];
})
.catch(function (err) { })
},
changeCity: function (city) {
this.city = city;
this.searchWeather();
}
}
})
完成后输入城市查询~
完成后也认识到了自己的很多问题,对于数据在页面中的渲染不清楚,对于JavaScript中一下概念也不熟悉(this),继续学习吧