前面我们学习了Vue的本地应用，但是现阶段本地应用已经很少了，一般的应用或多或少都会进行网络数据的交互。
所以我们这次学习Vue的网络应用，学习在Vue中怎样结合网络数据进行应用的开发(重点)。
首先我们需要学习一个网络请求库：axios ，学习通过axios来发送请求以及接受响应内容。
什么是axios？
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，是一款功能强大的网络请求库（个人认为axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样）。
Axios文档传送门：http://www.axios-js.com/zh-cn/docs/
用法：
(在网页中)首先需要引入cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios发送get请求的语法：
axios.get(地址).then(function(response){ },function(err){ }) //不带参数
axios.get(地址?key1=value1&key2=value2).then(function(response){ },function(err){ }) //带参数axios发送post请求的语法：
axios.post(地址).then(function(response){ },function(err){ }) //不带参数
axios.post(地址,参数对象).then(function(response){ },function(err){ }) //带参数其中，第一个回调函数function(response){} 会在响应完成后触发，第二个回调函数function(err){} 会在请求失败的时候触发。方法中的形参可以用来获取内容，一个是获取服务器响应的信息，一个是获取错误的信息。
接下来通过简单小Demo来感受下axios的用法。
Axios-GET请求触发第一个回调函数：
Axios-GET请求失败,调用第二个回调函数：
Axios-POST请求调用第一个回调函数：
上面简单的举了下axios中get和post请求的应用例子，接下来我们就使用axios+vue来开发一个简单网络应用。
网络应用的核心，就是定义在data的数据一部分是通过网络获取到的，故我们在方法中发送网络请求，再把服务器响应后返回的数据设置到data中对应的值。
下面是要用到的接口：
/*
接口：随机获取一条笑话
请求地址：https://autumnfish.cn/api/joke
请求方式：get
请求参数：无
响应内容：随机笑话
*/在浏览器中通过点击按钮获取笑话，进而显示在浏览器中，代码/效果如下：
欸？？？
console中明明已经拿到数据了呀，为什么页面没有更新？
这是因为axios回调函数中的this已经改变，无法访问到data中的数据。
解决方法：把this保存起来，回到函数中直接使用保存的this即可。
修改后的代码/运行结果如下：
上面是Vue+Axios的一个简单应用，接下来我们用Vue+Axios来开发一个天气预报相关的网页：
在输入框输入城市名字后点搜索或按回车键后，在下方会显示出所输入城市的天气预报，或者是鼠标点击输入框下方的热门城市，也可获取相应热门城市的天气预报，效果如下：
所需要用到的网络接口：
/*
接口：获取城市天气预报信息
请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方式：get
请求参数：city
响应内容：城市天气预报信息
*/HTML代码如下：
<html>
<head>
<title>Vue 入门</title>
<!-- 引入开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 官网提供的axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="weather">
请输入所要查询天气的城市：
<input type="text" v-model="city" @keyup.enter="quertWeather">
<input type="button" value="搜索" @click="quertWeather"><br>
热门城市:<div>
<a href="#" @click="changeCity('北京')">北京</a>
<a href="#" @click="changeCity('上海')">上海</a>
<a href="#" @click="changeCity('广州')">广州</a>
<a href="#" @click="changeCity('深圳')">深圳</a>
</div>
<ul class="weather_list">
<li v-for="item in weatherList" style="float: left;margin-right: 50px;">
<div><span>天气：{{ item.type }}</span></div>
<div><span>日期：{{ item.date }}</span></div>
<div><span>温度：{{ item.low }} ~ {{ item.high }}</span></div>
</li>
</ul>
</div>
<script src="./js/main.js"></script>
</body>
</html>
Vue.js代码如下：
var app = new Vue({
el:"#weather",
data:{
city:'',
weatherList:[],
},
methods: {
quertWeather:function(){
// console.log("天气查询");
// console.log(this.city);
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(function(response){
console.log(response);
// console.log(response.data);
// console.log(response.data.data);
// console.log(response.data.data.forecast);
//response.data.data.forecast是什么意思呢？访问接口的时候，我们真正所需要的数据被一层一层的包裹
//response.data.data.forecast拿到的就是服务器返回给我们的关于天气的信息
that.weatherList = response.data.data.forecast;
}).catch(function(error){
})
},
changeCity:function(city){
this.city = city;
this.quertWeather();
}
}
})关于response.data.data.forecast; 为什么通过这个可以访问到天气数据呢？
我们访问接口的时候，我们真正所需要的数据被一层一层的包裹，console.log() 将response输出到控制台，我们就能看到数据所在的位置，从而进行访问获取。
以上就是关于Vue的网络应用。
561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
