Vue学习笔记6-axios + vue / 案例：查询天气
程序员文章站
2022-07-04 11:58:11
...
axios 结合 vue 开发网络应用
例：
<div id="app">
<input type="button" value="获取" @click="getJoke">
<p>{{ joke }}</p>
</div>
<!-- vue开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- axios的在线地址 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.1.0/axios.min.js"></script>
<!-- 二者没有依赖关系，先导入谁都没关系 -->
<script>
// 接口1：随机获取一条笑话
// 请求地址：https://autumnfish.cn/api/jokes
// 请求方法：get
// 请求参数:无
// 响应内容：随机笑话
var app = new Vue({
el: "#app",
data: {
joke: "笑话",
},
methods: {
getJoke: function() {
var that = this;
//把 this 存储起来，防止变化
axios.get("https://autumnfish.cn/api/joke")
.then(function(response) {
console.log(response);
//获取笑话的数据
that.joke = response;
}, function(err) {
console.log(err);
//错误处理
})
}
}
})
</script>
- axios 回调函数中的 this 已经发生改变，无法访问到 data 中的数据
- 把 this 保存起来，回调函数中直接使用保存的 this 即可
- 和本地应用最大的区别是改变了数据来源
案例：查询天气
html 代码：
<body>
<div id="app">
<div class="title">
<span>(๑•̀ㅂ•́)و✧</span><span class="weath"> Weather</span>
</div>
<div class="search">
<input type="" name="" v-model="city" @keyup.enter="searchWeather" placeholder="请输入城市名来查询天气">
<a href="javascript:;" class="search-btn" @click="searchWeather">搜 索</a>
<ul class="recomme">
<li @click="changeWeather('北京')">北京</li>
<li @click="changeWeather('上海')">上海</li>
<li @click="changeWeather('深圳')">深圳</li>
<li @click="changeWeather('成都')">成都</li>
</ul>
</div>
<div class="weather-result">
<ul class="clearfix">
<li v-for="item in weatherList">
<h3>{{ item.wea }}</h3>
<span class="temperator">最低{{ item.tem2 }}℃ 最高{{ item.tem1 }}℃</span>
<span class="date">{{ item.day }}</span>
</li>
</ul>
</div>
</div>
<div class="band"></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/天气预报.js"></script>
</body>
js 代码
// 请求地址：http://wthrcdn.etouch.cn/weather_mini
// 请求方法：get
// 请求参数：city（城市名）
// 响应内容：天气信息
// 1.点击回车
// 2.查询数据
// 3.渲染数据
var app = new Vue({
el: "#app",
data: {
city: "",
weatherList: [],
},
methods: {
searchWeather: function() {
//保存this
var that = this
// 调用接口
axios.get("http://www.tianqiapi.com/api?version=v9&appid=82136948&appsecret=q3atkYkJ&city=" + this.city).then(function(response) {
// console.log(response);
that.weatherList = response.data.data.slice(0, 5);
//slice 返回数组的指定部分，从第0个开始往后五个
}).catch(function(err) {})
},
changeWeather: function(city) {
this.city = city
this.searchWeather()
}
}
})