Vue | 29.网络应用 - 天知道 - 点击查询

最新推荐文章于 2024-07-21 12:09:34 发布
最新推荐文章于 2024-07-21 12:09:34 发布
阅读量117 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyxyxyxyxyxyx/article/details/120566103
版权

文章目录

1.目标和实现思路

目标实现思路
点击更换城市v-on
更换城市的同时查询天气一个函数中调用另一个函数

2.点击更换城市

  1. 在Vue实例中，定义changeCityAndSearchWeather(city)

    image-20210927230924167

  2. 定义好"热门城市"的元素样式，使用v-on的@click来调用函数

    image-20210927231125388

3.更换城市的同时查询天气

  1. 在函数中调用本实例的另一函数，用this关键字即可

    image-20210927231218683

4.效果演示

Title - Google Chrome 2021_9_27 23_13_39

xyx-Eshang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue城市搜索
YHLQ的博客
12-23 998
实现： 子组件Alphabet.vue中的数据传递给子组件Cities.vue，兄弟组件之间的数据传参，可以通过父组件为媒介传递给另一个兄弟组件 子组件中通过this.$emit("自定义传递的名称"，"要传递的数据or方法")传递数据给父组件，父组件通过v-on:自定义传递的名称="自定义接收的名称"去接收数据or方法。 效果： 右侧字母列表为子组件Alphabet.vue，城市列表为子组件Cities.vue，当点击右侧列表中的字母时，城市列表会跳到对应的字母的城市，如点击B会跳转到B 子
vue axios网络应用--天知道
weixin_52634719的博客
08-05 117
没讲css.讲的一般
Vue+axios网络应用---天知道天气查询
qq_46186155的博客
08-01 277
效果图 功能分析 1、在搜索框输入城市名称，按下回车在下面显示城市天气信息。 2、点击下面四个城市也可以显示该城市信息。 功能实现 1、通过axios调用接口获取城市天气信息 2、对城市信息处理展示在页面上 代码地址：GitHub地址 ...
Vue笔记整理，让你快速入门Vue.js：04_5.网络应用：（项目）天知道-点击查询
鲁迷那的专栏—坚持实践后再写出来！
06-24 260
点击事件 我们可以通过 v-on 指令进行绑定，修改文本框的值，本质就是修改 v-model 绑定的 data 中的数据的值。而天气查询的逻辑，和回车查询是完全一样的。只是我们需要点击来改变城市名，所以这里我们可以使用事件自定义参数，让代码更加的的灵活。 查询数据和渲染数据 我们在上一节回车查询已经实现过了，这里我们只需考虑如何的复用就行？类似于 data 中数据的使用，通过 this 关键字就可以啦，定义在methods 中的方法，我们也可以通过 this 关键字给点出来，加上括号...
Vue | 28.网络应用 - 天知道 - 回车查询
xyx-Eshang的博客
09-30 161
文章目录1.目标和实现思路2.按下回车查询数据3.渲染数据4.效果演示 1.目标和实现思路 目标 实现思路 按下回车查询数据 v-on搭配axios 渲染数据 v-moedel 2.按下回车查询数据 声明Vue实
vue笔记——网络应用
weixin_44266163的博客
08-16 120
网络应用 文章目录网络应用axios使用两种请求方法（get，post）axios+vue随机获得joke内外层this改变箭头函数天知道应用（查询天气）1.回车查询2.点击查询（点击预设的城市，显示数据） axios使用 结合网络数据开发应用，axios（网络请求库）是功能强大的网络请求库（js库），Axios 是一个基于 promise 的 HTTP 库，可以发送get、post请求 两种请求方法（get，post） <!--官网提供的axios在线地址--> <script
六、VUE基础——axios+vue(天知道案例)
qq_41841658的博客
03-30 833
一、vue+axios结合使用获取随机笑话 在vue中使用axios发送请求，这里使用的是get请求方法，也可以使用post方法 1.步骤 导入vue和axios，这两个引入的先后顺序无所谓，但是一定要保证在开始写vue代码之前引入 使用v-on绑定click事件，在p标签中显示获取的笑话内容 在vue中写获取笑话的逻辑，即使用axios.get().then()方法获取随机笑话 2.代码实例 <!DOCTYPE html> <html lang="en">.
Vue+axios基础项目实战——天知道（天气预报查询应用）
fy03164598的博客
03-01 2493
一、分析项目的业务逻辑 回车查询 按下回车 查询数据 渲染数据 点击查询 点击搜索或点击城市标签 查询数据 渲染数据 二、基础静态页面实现 1. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, ini..
用Vue实现天知道案例——天气预报
qq_34306228的博客
04-08 3517
用Vue实现天知道案例——天气预报需求请求路径全部代码成果展示 需求 按下回车或者搜索实现搜索天气 查询数据（axios接口v-model) 渲染数据（v-for) 请求路径 请求地址 http://wthrcdn.etouch.cn/weather_mini 请求方式 get 请求参数 city(查询的城市名） 响应内容：天气信息 全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta cha
2020 零基础 Vue快速入门 教开发天气查询网页—天知道（激发编程乐趣）【整理+源码】
超逸の学习技术博客
01-14 2869
文章目录1、引言2、天知道概述3、模板展示4、回车键查询功能开发5、点击查询功能开发6、js完整代码及接口7、结束语 1、引言 最近呢，也是在自学Vue中，通过边学边记录，算是一项成长记录篇把，本篇博客以简单天气查询网页进行开发，激发对前端开发的兴趣，过程中的一些样式就不展示了，只展示一部分核心代码。需要源码的话在文章末尾会提供本次项目源码，请多指教~ 2、天知道概述 该网页名取名叫做“天知道”，...
Vue笔记整理，让你快速入门Vue.js：04_4.网络应用：（项目）天知道-介绍-回车查询
鲁迷那的专栏—坚持实践后再写出来！
06-19 528
一、前言 上一节我们介绍了axios+vue的基本使用，其中接口的调用步骤、数据的获取方式都和我们之前开发步骤类似，需要注意的是 axios响应成功的回调函数中，this改变了，我们需要提前保存，然后使用保存的那个值就可以了。那么如果逻辑再复杂一些呢？咱们这一节就来学习一个网络应用：天知道 天知道 是一个查询天气的应用，应用的核心是查询天气，那么怎么查询呢？ 二、实例代码验证 1、实现思路 @keyup.enter 监听回车键 更新中。。。 ...
vue网络项目——天知道
wcy8733996wcy的博客
01-28 1079
B站小项目（天知道），记录一下。 一、实现效果 1.输入要查询的城市，回车，返回该城市近五天的天气情况 2.点击输入框下面的城市，输入框内容自动变成刚才点击的城市，并返回该城市近五天的天气情况 二、运行界面 三、代码 html+css <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 387
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 692
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1153
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
vue v-for动态渲染元素有的元素带书名号 有的不带怎么实现所有元素左对齐
m0_67841039的博客
07-17 135
如果书名号的宽度不固定，可以使用JavaScript来动态计算并调整样式。然后在Vue模板中使用。
前端三大主流框架Vue React Angular有何不同？
最新发布
2401_85955297的博客
07-21 842
前端三大主流框架Vue React Angular比较，前端三大主流框架Vue React Angular有何不同？
使用 Vue 和 ECharts 打造动态数据可视化图表
liyananweb的博客
07-18 1009
通过本文，我们了解了如何使用 Vue 和 ECharts 来创建一个简单的柱状图，并实现了动态数据更新。Vue 的响应式数据绑定和 ECharts 的强大图表功能相结合，使得我们可以轻松地构建出功能强大且美观的数据可视化应用。希望这篇文章对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言。百万大学生都在用的AI论文写作工具，篇篇无重复👉:AI论文写作。
vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
shengmeshi的博客
07-17 195
vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
7.17（nodejs、vue、SSH服务、SSH免密登录）
m0_71589190的博客
07-17 1088
nodejs、vue、SSH服务、SSH免密登录

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值