基于vue.js和axios.js制作的天气查询，是个学习vue.js非常时候拿来练手的小项目
这是html的代码

• 
  
• 
  
• 
  
• 
  
• 
  
• 
  
•     天气查询
  
• 
  
• 
  
• 
  
•    
  
•         
  
•             天气查询
  
•             
  
• 
  
• 
  
•                     搜索
  
• 
  
•             
  
•             
  
•                 北京
  
•                 上海
  
•                 广州
  
•                 深圳
  
•             
  
•         
  
• 
  
  
  
  • <li v-for=&quot;item in weatherList&quot;>
    
  •                 {{ item.type }}
    
  •                
    
  •                     {{ item.low }}
    
  •                     ~
    
  •                     {{ item.high }}
    
  •                
    
  •                 {{ item.date }}
    
  • 
    
  • 
    
  
  
•    
  
• 
  
• 
  
• 
  
• 
  
• 
  
• 
  

注意：这里的vue和axios的引用是没有先后关系的
这里是css的代码

• /*style.css*/
  
• *{
  
•     padding: 0px;
  
•     margin: 0px;
  
• }
  
• #app {
  
•     text-align: center;
  
•     margin: 100px 0px;
  
• }
  
• .logo {
  
•     font-size: 20px;
  
•     font-family: &quot;宋体&quot;;
  
• }
  
• .form_group {
  
•     margin-top: 10px;
  
• }
  
• .input_text {
  
•     height: 30px;
  
•     width: 500px;
  
• }
  
• .input_sub {
  
•     height: 34px;
  
•     border: none;
  
•     width: 50px;
  
•     margin-left: -5px;
  
•     vertical-align: middle;
  
•     background-color: skyblue;
  
• }
  
• .hotkey>a {
  
•     color: black;
  
•     text-decoration: none;
  
• }
  
• .hotkey {
  
•     margin-top: 10px;
  
•     margin-left: -400px;
  
• }
  
• .weather_list>li {
  
•     height: 100px;
  
•     display: inline-block;
  
•     list-style: none;
  
•     border-right: 3px salmon solid;
  
•     margin-right: 30px;
  
•     padding-right: 30px;
  
•     margin-top: 10px;
  
•     line-height: 35px;}
  

这里是js的代码了

• //main.js
  
• var app = new Vue({
  
•     el:&quot;#app&quot;,
  
•     data:{
  
•         city:&quot;&quot;,
  
•         weatherList:[],
  
•     },
  
•     methods: {
  
•         searchweather:function(){
  
•             // console.log(&quot;查询天气&quot;);
  
•             // console.log(this.city);
  
•             var that = this;
  
•             axios.get(&quot;http://wthrcdn.etouch.cn/weather_mini?city=&quot;+this.city).then(function(response){
  
•                 console.log(response.data.data.forecast);
  
•                 that.weatherList = response.data.data.forecast;
  
•             })
  
•         }
  
•     },})
  

主要就是使用axios和vue的相互结合啦

登录/注册后可看大图
免责声明：本文内容部分来源于网络，出于网络分享目的，如对您的权益版权有异议我们将予以删除，谢谢合作！

666666