本文共 2842 字，大约阅读时间需要 9 分钟。

1、引言

最近呢，也是在自学Vue中，通过边学边记录，算是一项成长记录篇把，本篇博客以简单天气查询网页进行开发，激发对前端开发的兴趣，过程中的一些样式就不展示了，只展示一部分核心代码。需要源码的话在文章末尾会提供本次项目源码，请多指教~

2、天知道概述

该网页名取名叫做“天知道”，是一个真实可以查询某个城市天气的网页。

• ① 回车查询
• ② 点击查询
• ③ 能查询近5天的天气

天知道涉及知识：

①应用的逻辑代码和页面分离，使用单独的js文件编写

天知道完整版效果图展示：

3、模板展示

下面提供待开发的模板代码：

      
       
       
           
       
           
   
      
    
        
     
      
     
        
     
          
                
                  搜 索                  
     
        
     
          
      北京          
      上海          
      广州          
      深圳        
     
      
    
      
    
        
     
          
      
       小雨
      
          
      
            
       低温 2℃            ~            
       高温 19℃          
      
          
      
       24日星期天
      
        
      
    
    
   
    
           
           
     

4、回车键查询功能开发

      
       
       
           
       
           
   
      
    
        
     
      
     
        
     
          
                
                  搜 索                  
     
        
     
          
      北京          
      上海          
      广州          
      深圳        
     
      
    
      
    
        
     
          
      
       {
   {
   item.type}}
      
          
      
            
       {
   {
   item.low}}            ~            
       {
   {
   item.high}}          
      
          
      
       {
   {
   item.date}}
      
        
      
    
    
   
    
           
           
   	  

5、点击查询功能开发

      
       
       
           
       
           
   
      
    
        
     
      
     
        
     
          
                
                  搜 索                  
     
        
     
          
      北京          
      海口          
      广州          
      长沙        
     
      
    
      
    
        
     
          
      
       {
   {
   item.type}}
      
          
      
            
       {
   {
   item.low}}            ~            
       {
   {
   item.high}}          
      
          
      
       {
   {
   item.date}}
      
        
      
    
    
   
    
           
           
   	  

6、js完整代码及接口

/*	请求地址:http://wthrcdn.etouch.cn/weather_mini	请求方法:get	请求参数:city(城市名)	响应内容:天气信息		1.点击回车	2.查询数据	3.渲染数据*/ var app = new Vue({
   	 el:'#app',	 data:{
   		 city:'',		 weatherList:[]	 },	 methods:{
   		 searchWeather:function(){
   			 axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then((res)=>{
   				 console.log(res.data.data.forecast);				 this.weatherList=res.data.data.forecast			 }).catch((err)=>{
   				 console.log(err);			 })		 },		 changeCith:function(city){
   			 this.city=city;			 this.searchWeather();		 }	 } })

7、结束语

至此，天知道查询天气实例就开发完毕了，你是不是对Vue更加了解了呢，注意一下，过程中的代码并非源代码，直接使用可能会出bug，只是展示了相关功能的部分核心代码，

链接：https://pan.baidu.com/s/1LlJA30uaYatiQ4diF0ig7Q

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

学如逆水行舟，不进则退

转载地址：https://chocolate.blog.csdn.net/article/details/103972240 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！