之前我们学习了vue本地应用，通过vue提供的指令对本地的数据执行操作，但是现在很少有纯本地的应用，或多或少都会进行网络的交互，所以我们来学习vue网络应用，结合网络数据开发。
常见的网络请求库，功能单一就是发送请求，容量小，ajax的精封装，可方便地和vue结合。
效果如图：
axios如何结合vue开发网络应用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Vue</title> <script src="js/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <input type="button" value="获取笑话" @click="getjoke"/> <p>{{joke}}</p> </div> <script> var app = new Vue({ el:"#app", data:{ joke:"一个笑话" }, methods:{ getjoke:function(){ var that = this; //进入了axios对象中,vue的原本的this会发生改变,故设之。 axios.get("https://autumnfish.cn/api/joke") .then( function(response){ that.joke = response.data; }, function(err){} ) } } }) </script> </body> </html>效果如图：
a x i o s \color{#FF0000}{axios} axios回调函数中的 t h i s \color{#FF0000}{this} this已经改变,无法访问到 d a t a \color{#FF0000}{data} data中数据把 t h i s \color{#FF0000}{this} this保存起来,回调函数中直接使用保存的 t h i s \color{#FF0000}{this} this即可和本地应用的最大区别就是改变了 数 据 来 源 \color{#FF0000}{数据来源} 数据来源结合vue的知识利用axios做一个查询天气的网站，能够做到点击查询和输入回车查询
按下回车（v-on .enter）、查询数据（anxios 接口 v-model）、渲染数据（v-for 数组 that）
应用的逻辑代码建议和页面 分 离 \color{#FF0000}{分离} 分离 a x i o s \color{#FF0000}{axios} axios回调函数中的this指向改变了，需要额外的保存一份服务器返回的数据比较复杂时，获取的时候需要注意层级结构点击城市（v-on 自定义参数）、查询数据（ this.方法() ）、渲染数据
如图所示：
自定义参数可以让代码的 复 用 性 \color{#FF0000}{复用性} 复用性更高 m e t h o d s \color{#FF0000}{methods} methods中定义的方法内部，可以通过 t h i s \color{#FF0000}{this} this关键字点出其他方法