vue和axios做的查询天气

最新推荐文章于 2024-06-01 15:46:07 发布
最新推荐文章于 2024-06-01 15:46:07 发布
阅读量545 收藏 1
点赞数
分类专栏： 前端笔记 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40652759/article/details/103686960
版权

利用axios调用接口，vue获取和绑定数据

Enter事件查询，还有热键查询

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app" class="wrap">
        <div class="search_form">
            <div class="logo"><img src="../vue/img/01.png" alt="logo" style="width: 200px;"></div>
            <div class="form_group">
                <input type="text" @keyup.enter='searchWeather' v-model="city" class="input_txt"
                    placeholder="请输入从查询的城市">
                <button class="input_sub">搜 索</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>
            <ul class="weather_list">
                <li v-for="(item, index) in weatherList" :key="index">
                    <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>
    </div>
    <script>
        /*
        天气接口
        请求地址：http://wthrcdn.etouch.cn/weather_mini
        请求方法：get
        请求参数：city
        响应内容：天气信息
        */
        // 1.点击回车
        // 2.查询数据
        // 3.渲染数据
        const app = new Vue({
            el: '#app',
            data: {
                city: '',
                weatherList: [],
            },
            methods: {
                searchWeather: function (city) {
                    const that = this;
                    // console.log('weather');
                    // 调用接口
                    axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                        .then(function (response) {
                            // console.log(response);
                            that.weatherList = response.data.data.forecast;
                            // console.log(that.weatherList);
                            
                        })
                        .catch(function (error) {
                            console.log(error);

                        })

                },
                changeCity:function(city){
                    this.city = city;
                    this.searchWeather();
                }
            }
        })
    </script>
</body>
JasonJaiy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-axios天气预报
08-17
VUE天气预报，html，js代码&css样式，可直接打开查看。
vue框架+axios：天气查询
11-08
vue框架编写天气查询，axios获取接口数据
【Vue】 Vue+axios实现查询天气
在下小秦
02-17 432
<!DOCTYPE html> <html lang="en"> <head> <meta charset='UTF-8'> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天气预
vue中axios的基本使用，天气查询案例
Rosen's
02-01 663
axios是一个异步请求技术，核心作用就是用来在页面中发送异步请求，并获取对应数据在页面中渲染，即页面局部更新技术。
推荐一款移动端天气App即刻天气
weixin_30773135的博客
08-01 720
推荐一款移动端天气App即刻天气 一 应用描述 　　即刻天气预报是一个提供全国各城市15日天气预报和空气质量的APP，包含全国3000个城市天气预报，3万个乡镇天气，15日及48小时空气质量预报，是万千用户的明智选择。即刻天气，时刻知您冷暖二二 特色功能 　　15天天气：掌握15天气状况，提前安排出行计划　　24小时预报：直观展示未来24小时气温趋势　　实时降雨预报：预报未来降水情况，精确...
vue（5）（网络应用，axios，天气预报实例）
mimo_mimo的博客
03-15 284
网络应用，axios
利用vue+axios实现简单天气查询
weixin_44239550的博客
12-19 873
一、代码： <!DOCTYPE html> <html> <head> <title>天气查询案例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.stat
vue-基于vue2+vuex+axios实现的天气预报小项目.zip
05-04
vue vue_基于vue2+vuex+axios实现的天气预报小项目
基于Vue+axios的天气预报实现.rar
02-17
基于Vue+axios的天气预报实现，适用于Vue初学者
原生js实现查询天气小应用
11-28
本文实例为大家分享了js查询天气应用，供大家参考，具体内容如下 demo:  https://zsqosos.github.io/weather/ 实现功能：打开网页时显示用户所在城市的天气状况，在输入框输入城市可查询其它城市。 实现过程：先调用百度地图的API来获取用户所在的城市，随后调用聚合数据的天气API将数据放在页面上。由于ajax不支持跨域，所以采用了jsonp的方式来调用数据。 实现的原理比较简单，HTML和css比较长，我就只将js代码贴出来，想看完整代码的朋友可以去我的github查看 https://github.com/zsqosos/weather //调用json
axios+vue.js制作的天气预报界面.zip
07-07
一个简单的vue.js单页面，适合小白中的小白
Vue+axios基础项目实战——天知道（天气预报查询应用）
fy03164598的博客
03-01 2405
一、分析项目的业务逻辑 回车查询 按下回车 查询数据 渲染数据 点击查询 点击搜索或点击城市标签 查询数据 渲染数据 二、基础静态页面实现 1. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, ini..
vue axios实战，请求天气预报接口
免费天气预报接口 - 天气api
12-13 1745
基础教程，一步步实现 vue 使用axios 请求天气预报接口
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1198
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 516
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue3 vue-draggable-next 实现拖拽穿梭框效果
最新发布
游九尘的博客
06-01 292
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 334
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 469
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
用vue做一个天气预报页面
05-19
好的，下面是一个简单的天气预报页面的vue实现。 首先，你需要在你的项目中安装axios和vue-router，以便获取天气数据和进行页面路由。 然后，你需要创建一个组件来显示天气信息。在这个组件中，你可以使用axios来获取天气数据，并将其渲染到页面上。 ```html <template> <div> <h2>天气预报</h2> <div v-if="loading">正在加载中...</div> <div v-if="!loading && weather"> <h3>{{ weather.city }}</h3> <p>{{ weather.weather }}</p> <p>{{ weather.temp }}°C</p> <p>{{ weather.wind }}</p> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { weather: null, loading: true, }; }, async mounted() { const response = await axios.get('http://wthrcdn.etouch.cn/weather_mini?city=北京'); this.weather = response.data.data; this.loading = false; }, }; </script> ``` 在这个组件中，我们使用了一个loading变量来控制当天气数据被加载时显示的文本。我们还使用了async/await来等待axios获取天气数据的响应，然后将响应数据存储在组件的data中，并将loading变量设置为false以显示天气信息。 现在，你可以在你的vue路由器中创建一个路由来显示这个组件。 ```javascript import Vue from 'vue'; import Router from 'vue-router'; import Weather from '@/components/Weather'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'Weather', component: Weather, }, ], }); ``` 最后，你需要在你的应用程序中使用这个路由器，并将其挂载到一个DOM元素上。 ```javascript import Vue from 'vue'; import App from './App'; import router from './router'; Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>', }); ``` 现在，当你访问你的应用程序时，你将看到一个简单的天气预报页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值