vue简单案例初涉axios接口-天气预报查询

<template>
  <div id="app">
    <p>越过系列{{title}}</p>
    
   <h4>天气预报查询： <input v-model="city" type="text" v-bind:placeholder="info" v-on:keyup.enter='searchTianqi'></h4>
   <!-- 输入为空会报错 -->
  

   <div v-if="isShow">
     <p>城市：{{data.city}}</p>
     <p>今日温度：{{data.wendu}}</p>
     <p style="color:red;">温馨提示：{{data.ganmao}}</p>
      <div class="weilai">未来五天温度：
          <div v-for="(item,index) in data.forecast" v-bind:key='index'>
            <p>时间：{{item.date}}</p>
            <p>风向：{{item.fengxiang}}</p>
            <p>{{item.low}} ~ {{item.high}}</p>
            <p>天气：{{item.type}}</p>
          </div>

      </div>
   </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      title:'axios',
      city:''|| null,
      info:'请输入要查询的城市',
      isShow:false,
      data:{},
    }
  },
  methods:{
    searchTianqi(){
      console.log(111,this.city)
      this.axios
      .get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
      .then(res=>{
        console.log(res)
        if(res.status==200){
           this.data=res.data.data;
           this.isShow=true;
        }else{
          this.data={};
          this.isShow=false;
          console.error(res);
        }
       
      })
      .catch(error => console.log(error))
    }
  },
  // 生命周期钩子
  mounted(){
    // this.axios
    // .get('http://wthrcdn.etouch.cn/weather_mini?city=北京')
    // .then(res =>{
    //   console.log(res.data.data);
    //   this.data = res.data.data;
    // })
  }
}
</script>

<style>
#app {
  /* text-align: left; */
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
input{
  height: 30px;
}
.weilai{
  display: flex;
  justify-content: space-around;
}
.weilai div{
  margin-top: 20px;
  border: 1px solid bisque;
  padding: 5px;
}
.weilai p{
  text-align: left;
}
</style>

总结：简单练习下vue怎么使用axios获取后端数据的