前文：通过第四天的vue基础学习，今天我会将vue的本地应用进行一个综合的运用，制作一个天气预报的网页，输入想要观看城市的天气预报就可以观看改城市的天气。借此对vue本地应用进行练习。
成品展示：
vue文件代码展示（使用到的vue本地应用有：
1.v-on 在此项目用于绑定getweather和changecity事件
2.v-model 在此项目用于当触发changecity事件传参给data中的city，实现表单数据双向绑定
3.v-for 在此项目用于获取weatherlist数据里面的参数
4.v-text 在此项目用于获取weatherlist数据里面参数的信息再渲染出来）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- vue必须引入的头文件 -->
<script src="./js/vue.js"></script>
<!-- 官网提供的axios在线地址 （网络请求库）axios是请求后台资源的摸块（可以使用get与post等请求）
-->
<script src="./js/axios.min.js"></script>
<!-- <link rel="stylesheet" href="/phonechane.css"> -->
<title>仓鼠天气预报</title>
</head>
<body>
<h1>仓鼠天气预报</h1>
//@为vue-on绑定事件简写，详细看前一天
<div id="app">
<input type="text" class="input_txt" placeholder="请输入查询的城市" @keyup.enter="getweather" v-model="city"> //placeholder为默认输入
<button class="input_button" @click="getweather">搜索</button>
<div>
<a href="javascript:;" @click="changecity('北京')">北京</a>
<a href="javascript:;" @click="changecity('广州')">广州</a>
<a href="javascript:;" @click="changecity('深圳')">深圳</a>
<a href="javascript:;" @click="changecity('阳江')">阳江</a>
</div>
<ur class="weather_list">
<li v-for="item in weatherlist">
<div>{
{item.date}}</div> //item在这里指代weatherlist
<div>{
{item.type}}</div>
<div><b>{
{item.low}}</b>~<b>{
{item.high}}</b></div>
</li>
</ur>
</div>
</body>
<script src="./js/weather.js"></script> //引入js文件js代码展示：
var app= new Vue({
el:"#app",
data:{
city:"",
weatherlist:[],
},
methods:{
getweather:function(){
// 定义一个that指向外面的this
var that=this
// （网络请求库）axios是请求后台资源的摸块（可以使用get与post等请求）
axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
// then为获取数据成功，catch为获取数据失败
// response和err是自定义但data是数据之一，具体看有什么数据去网页f12控制台上看
.then((response)=>{
// console.log(response)可以看出axios了网页有什么数据
console.log(response.data.data.forecast)
that.weatherlist=response.data.data.forecast
})
.catch((err)=>{
console.log(err)
})
},
changecity:function(city){
this.city=city; //city为v-model的参数
this.getweather();
}
},
})