VUE快速入门 第三章：网络应用（axios+vue）

第三章：网络应用

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

代码：https://gitee.com/ikunsdc/vue-quick-start