第三章：网络应用
Vue结合网络数据开发应用
axios：网络请求库，内部ajaix，轻量简单，仅发送请求
axios+vue
天气预报案例
axios基本使用
1、如何发送请求，获取响应内容
2、使用：
a.导包：
<!-- 官网提供的 axios 在线地址 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
b.注册全局的axios对象，并调用方法
axios.get(地址？key=value&key2=value2).then(function(response)){},function(err){})
axios.post(地址？{key=value&key2=value2}).then(function(response)){},function(err){})
红色部分：回调函数1，当请求成功时调用
蓝色部分：回调函数2，当请求失败时调用
通过回调函数形参，可获取响应内容或错误信息。
3、axios官网文档：https：//github.com/axios/axios
axios+vue
axios回调函数中的this已经改变(因为是回调函数)，this.data无法访问到data中数据。
解决：需要把this保存起来，回调函数中使用保存到的this即可。
| <div id="app"> <input type="button" value="获取笑话" @click="getJoke"> <p> { { joke }}</p> </div> |
| <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
| var app = new Vue({ el:"#app", data:{ joke:"很好笑的笑话" }, methods: { getJoke:function(){ var that = this; axios.get("https://autumnfish.cn/api/joke").then(function(response){ that.joke = response.data; },function (err) { }) } }, }) |
天知道-介绍
输入城市，回车即可显示出天气信息
输入框下面有意个常用城市，点击即可查询，输入框内部同步为点击的常用城市。
天知道-回车查询
1、回车（v-on .enter事件绑定）
2、获取数据（axios接口，v-model获取输入）
3、渲染数据（v-for数组,that）
| html: <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="queryWeather" /> <button class="input_sub" @click="queryWeather">搜 索</button> ---------------------- <ul class="weather_list"> <li v-for="(item,index) in forecastList" > <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>{ { item.date }}</span></div><!—日期--> </li> </ul>
---------- <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="./js/main.js "></script> |
| ./js/main.js: <script> new Vue({ el: "#app", data: { city: " ", forecastList: [], hotCitys: ["北京", "上海", "广州", "深圳"] }, methods: { queryWeather() { var that = this; axios .get(`http://wthrcdn.etouch.cn/weather_mini?city=’+this.city) .then(function(response){ that.forecastList = response.data.data.forecast; }) .catch(function(err){} }, clickSearch(city) { this.city = city; this.queryWeather(); } } }); </script> |
天知道-点击查询
1、点击城市（v-on 自定义参数）
2、获取数据（this.方法（），方法复用）
3、渲染数据
| html: <div class="hotkey"> <a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{ { city }}</a> </div> ---------------------- <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="./js/main.js "></script> |
| ./js/main.js: <script> Var app = new Vue({ el: "#app", data: { city: " ", hotCitys: ["北京", "上海", "广州", "深圳"] }, methods: { clickSearch(city) { this.city = city; this.queryWeather(); } } }); </script> |
小结：
methods中定义的方法内部，可以使用this关键字调用其他方法。
自定义参数，代码复用性更高。
视频：https://www.bilibili.com/video/BV12J411m7MG?from=search&seid=488807520486206024
笔记：https://gitee.com/ikunsdc/vue-quick-start/blob/master/VUE%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.pdf