1. 网络应用
Vue结合网络数据开发应用
2. axios
功能强大的网络请求库
使用方法：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> axios.get(地址？key=value&key2=values//////////).then(function(response){},function(err){}) axios.post(地址,{key:value,key2:value}).then(function(response){},fucntion(err){}) 复制代码
<script> $(function () { //编写jQuery相关代码 $(".get").click(function () { axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function (response) { for (var i in response.data["jokes"]) { console.log(response.data["jokes"][i]); } }, function (err) { console.log(err); }) }); $(".post").click(function () { axios.post("https://autumnfish.cn/api/user/reg", { username: "发生发个方法" }).then(function (response) { console.log(response); }, function (err) { console.log(err); }) }) }); </script> <body> <input type="button" value="来3个笑话" class="get"> <input type="button" value="哈哈哈" class="post"> </body> 复制代码
3.axios+vue
axios如何结合vue开发网络应用
语法：
var app = new Vue({ el:"#app, data:{ joke:"搞笑的笑话" }， methods:{ getjokes:function(){ axios.get("地址").then(function(response){},function(){}); } } }) 复制代码
总结：
- axios回调函数中的this已经改变无法访问到data中数据。
- 把this保存起来，回调函数中直接使用保存的this即可。
- 和本地应用的最大区别就是改变了数据来源。
4.网络应用案例-天气查询
4.1回车查询
- 按下回车（v-on.enter）
- 查询数据（axios接口 v-model）
- 渲染数据（v-for数组 that）
天气请求地址：wthrcdn.etouch.cn/weather_min…
总结：axios回调函数中的this指向变了，需要额外保存一份
4.2点击查询
总结：
- 自定义参数可以让代码的复用性更高
- methods中定义的方法内部，可以通过this关键字点出其他的方法
