目录

         目标效果：

更换的新接口+接口文档：

天知道新的Get请求接口:http://ajax-api.itheima.net/api/weather

html文件中注意因为接口更换，要修改原代码为如下红字部分：

重点原理：

（1）v-on可以传递自定义参数，v-on:click=”...“的简写是@click，其他事件同理

（2）v-on可以结合事件修饰符

e.g.@keyup.enter="add"指——当键盘回车键弹起后，调用add事件

（3）v-model获取+设置 表单元素 的值

【v-model双向数据绑定——表单数据和绑定的数据互相同步修改】

（4）v-for——【遍历数组】【是响应式的，和数据绑定，数据没了，就也不生效了】根据数据生成列表结构

语法   v-for=(item，index) in arr

（5）{{}}差值表达式是v-text的简写——【解析文本用】设置标签的文本值 

代码部分：

1.main.js(全是重点)

2.天知道案例.html(部分重点，用{{}}渲染数据到页面，查看结构)

【注意：在引入main.js之前，引入vue.js和axios.min.js】

3.vue.js(辅助作用)

安装Vue的方法 /获取vue.js文件的方法： 

4.axios.min.js(辅助作用)

（1）可以用axios在线网址【要连网】：

（2）也可以下载axios.min.js本地文件：

5.reset.css(辅助作用)

6.index.css(辅助作用)

目标效果：

1.在文本框输入想要查询天气信息的城市的名称，点击搜索按钮/按键盘的Enter回车键，即可获得该城市的天气信息。

2.点击文本框下面的四个城市中任意一个的名称，可以获得该城市的天气信息。

e.g.1初始状态：

e.g.2文本框中输入南京：

 点击搜索按钮/按键盘的Enter回车键，获得南京的天气信息：

 e.g.3点击文本框下面的深圳：

 获得深圳的天气信息：

更换的新接口+接口文档：

天知道新的Get请求接口:http://ajax-api.itheima.net/api/weather

  请求地址: http://ajax-api.itheima.net/api/weather

  请求方法:get

  请求参数:city(城市名)

  响应内容:天气信息

e.g.：http://ajax-api.itheima.net/api/weather?city=南京

html文件中注意因为接口更换，要修改原代码为如下红字部分：

     

     

        {item.wea}} 渲染天气信息 -->

       

{{item.wea}}

       

          {item.tem2}} 渲染低温信息 -->

          {{item.tem2}}

          ~

          {item.tem1}} 渲染高温信息 -->

          {{item.tem1}}

       

        {item.day}} 渲染日期信息 -->

       

{{item.day}}

重点原理：

（1）v-on可以传递自定义参数，v-on:click=”...“的简写是@click，其他事件同理

（2）v-on可以结合事件修饰符

e.g.@keyup.enter="add"指——当键盘回车键弹起后，调用add事件

（3）v-model获取+设置 表单元素 的值

【v-model双向数据绑定——表单数据和绑定的数据互相同步修改】

（4）v-for——【遍历数组】【是响应式的，和数据绑定，数据没了，就也不生效了】根据数据生成列表结构

语法   v-for=(item，index) in arr

item遍历的每一项【可改名字】

index遍历的每一项的索引号

in关键字 【不可改】

arr遍历的数据/数组【可改名字】

（5）{{}}差值表达式是v-text的简写——【解析文本用】设置标签的文本值 

代码部分：

1.main.js(全是重点)

/*之前的请求地址【现在已经无效了】: http://wthrcdn.etouch.cn/weather_mini有效的请求地址: http://ajax-api.itheima.net/api/weather请求方法:get请求参数:city(城市名)响应内容:天气信息1. 点击回车2. 查询数据3. 渲染数据*/
var app = new Vue({el: "#app",data: {city: "",//因为查询的是城市信息weatherList: []//天气预备信息列表，用一个空数组存放},methods: {//searchWeather搜索天气预报信息方法searchWeather: function () {//用that存放this,此处this指当前对象#appvar that = this;//用axios,发起get请求//this.city可以获得文本框输入的城市名称,此处this指当前对象#appaxios.get("http://ajax-api.itheima.net/api/weather?city=" + this.city)//1.请求成功.then(function (response) {// response.data.data.data是在获取请求成功后的数据中，天气预报信息的数组// 将天气预报信息的数组，赋值给#app中的weatherList that.weatherList = response.data.data.data;})//2.请求失败.catch(function (err) {console.log(err);})},//changeCity改变城市方法，点击下面的城市名称，可以切换文本框中：为对应城市的名称changeCity: function (city) {//形参city接收传入的city//将传入的city赋值给当前对象#app的形参citythis.city = city;//此处this指当前对象#app//调用searchWeather搜索天气预报信息方法，搜索当前城市名称对应的天气预报信息this.searchWeather();}}
})

2.天知道案例.html(部分重点，用{{}}渲染数据到页面，查看结构)

【注意：在引入main.js之前，引入vue.js和axios.min.js】

搜 索
北京上海广州深圳
{item.wea}} 渲染天气信息 -->
{{item.wea}}
{item.tem2}} 渲染低温信息 -->{{item.tem2}}~{item.tem1}} 渲染高温信息 -->{{item.tem1}}
{item.day}} 渲染日期信息 -->
{{item.day}}

3.vue.js(辅助作用)

 因为该文件内容太多，请前往该网址（Vue官网）下载 

安装 — Vue.js

安装Vue的方法 /获取vue.js文件的方法： 

4.axios.min.js(辅助作用)

（1）可以用axios在线网址【要连网】：

（2）也可以下载axios.min.js本地文件：

 去github下载本地文件 网址GitHub - axios/axios: Promise based HTTP client for the browser and node.js 

​

解压axios-1.x文件夹：

 ​

此处使用里面的axios.min.js

5.reset.css(辅助作用)

body,ul,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0;
}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;
}
a{text-decoration:none;
}
ul{list-style:none;
}
img{border:0px;
}/* 清除浮动，解决margin-top塌陷 */
.clearfix:before,.clearfix:after{content:'';display:table;    
}
.clearfix:after{clear:both;
}
.clearfix{zoom:1;
}.fl{float:left;
}
.fr{float:right;
}

6.index.css(辅助作用)

body{font-family:'Microsoft YaHei';   
}
.wrap{position: fixed;left:0;top:0;width:100%;height:100%;/* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); *//* background:#8fd5f4; *//* background: linear-gradient(#6bc6ee, #fff); */background:#fff;}
.search_form{width:640px;margin:100px auto 0;
}
.logo img{display:block;margin:0 auto;
}
.form_group{width:640px;height:40px;margin-top:45px;
}
.input_txt{width:538px;height:38px;padding:0px;float:left;border:1px solid #41a1cb;outline:none;text-indent:10px;
}.input_sub{width:100px;height:40px;border:0px;float: left;background-color: #41a1cb;color:#fff;font-size:16px;outline:none;cursor: pointer;position: relative;
}
.input_sub.loading::before{content:'';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url('../img/loading.gif');
}.hotkey{margin:3px 0 0 2px;
}.hotkey a{font-size:14px;color:#666;padding-right:15px;
}
.weather_list{height:200px;text-align:center;margin-top:50px;font-size:0px;
}
.weather_list li{display:inline-block;width:140px;height:200px;padding:0 10px;overflow: hidden;position: relative;background:url('../img/line.png') right center no-repeat;background-size: 1px 130px;
}.weather_list li:last-child{background:none;
}/* .weather_list .col02{background-color: rgba(65, 165, 158, 0.8);
}
.weather_list .col03{background-color: rgba(94, 194, 237, 0.8);
}
.weather_list .col04{background-color: rgba(69, 137, 176, 0.8);
}
.weather_list .col05{background-color: rgba(118, 113, 223, 0.8);
} */.info_date{width:100%;height:40px;line-height:40px;color:#999;font-size:14px;left:0px;    bottom:0px;    margin-top: 15px;
}
.info_date b{float: left;margin-left:15px;
}.info_type span{color:#fda252;font-size:30px;line-height:80px;
}
.info_temp{font-size:14px;  color:#fda252;
}
.info_temp b{font-size:13px;
}
.tem .iconfont {font-size: 50px;}