天知道-网络应用-Vue小案例-黑马程序员

案例介绍

学习背景：快快学习，学完找工作

输入城市回车或点击搜索可以查询天气。

代码结构

<div class="wrap" id="app">

  <div class="search_form">
  
  	//logo和搜索栏
    <div class="logo"><img src="img/logo.png" alt="logo" />div>
    <div class="form_group">
      <input type="text" v-model="city"  @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询天气的城市"/>
      <button class="input_sub" @click="searchWeather">
        搜 索
      button>
    div>
    
	//热门城市快捷搜索
    <div class="hotkey">
        <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>
      
  div>
    
	//显示天气的格式
    <ul class="weather_list">
      <li v-for="item in weatherList">
        <div class="info_type"><span class="iconfont">{{ item.type }}span>div>
        <div class="info_temp">
          <b>{{ item.low }}b>
          ~
          <b>{{ item.high }}b>
        div>
        <div class="info_date"><span>{{ item.date }}span>div>
      li>
    ul>
    
div>

js部分：

 var app = new Vue({
    el:"#app",
    data:{
        city:"无锡",
        weatherList:[]
    },
    methods:{
        searchWeather:function(){
            // console.log("search");
            // console.log(this.city);

            // 保存this
            var that = this;

            axios
            .get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)

            // 成功之后调取
            .then(function(response){
                // console.log(response);
                // console.log(response.data.data.forecast);

                // 这里就直接是that.weatherList而不是that.data.weatherList
                // 还要注意：调用此函数的是服务器端，所这里的this不是Vue中的this
                that.weatherList=response.data.data.forecast
                // app.weatherList=response.data.data.forecast

            })
            // // 箭头函数方式
            // .then(response => {
            //     this.weatherList = response.data.data.forecast
            // })
            // 失败之后调取
            .catch(function(err){})
        },
        changeCity:function(city){
            this.city=city;
            this.searchWeather();
        }

    }

 })

分析

请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city(城市名)
响应内容:天气信息

1. 点击回车
2. 查询数据
3. 渲染数据

通过接口发送请求，接收返回的信息展示

知识点学习

1. 关于axios.get的写法
   axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)里面?city=是原链接后加的，又加了this.city的值，只要括号里是一个完整的链接就行。
2. .get后面就是.then、.catch，这种写法留意，axios没学好。
3. 北京中的href="javascript:"
   其中javascript:是伪协议，它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:可以实现A标签的点击事件运行时，如果页面内容很多，有滚动条时，页面不会乱跳，用户体验更好
4. Vue 解惑之 关于axios 回调函数中 this 的指向
   解决这个问题可以提前保存一份this,或者用app.weatherList，又或者用箭头函数。箭头函数我也不是很了解，至于为什么this 会不一样，我觉得应该是this指的是本地，当axios请求到服务端时，this就已经是服务端的地址了，然后.then是在服务端执行的，所以其中的this自然是指服务端的this。不知道理解的对不对。

注意事项

保存this 时，要注意在axios外保存。

项目再现

代码地址：GitHub