Vue实例练习——天气预报

最新推荐文章于 2022-08-04 22:58:26 发布

DaftWeeknd

最新推荐文章于 2022-08-04 22:58:26 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qq_39332845/article/details/114601569

版权

该博客介绍了一个使用Vue.js实现的天气预报应用。用户可以在搜索框中输入城市名称，显示当前城市及其未来四天的天气预报。此外，应用还提供了预设的城市选项，方便快速查询。开发者在实践中运用了v-for、v-model和v-on指令，以及axios库进行API数据获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能描述
在搜索框中输入城市，下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市，点击可以快速查询。
html代码

    <div id="app">
        <div id="srchbar">
            <input type="text" v-model="city" @keyup.enter="srch(city)" id="ipt">
            <a @click=srch(city) id="btn">search</a>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DaftWeeknd

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue/axios-基础练习(天气预报/音乐播放器)

Fky_mie的博客

04-01

647

Vue/axios-基础练习参考: v-on修饰符 axios官网文章目录Vue/axios-基础练习vue基础指令axios基础使用方法axios怎么与vue结合练习1: 点击按钮加减数字练习2: 点击切换显示or隐藏练习3: 点击更改目标的样式练习4: 响应式生成列表练习5: 点击获取一则笑话综合练习练习1: todoList,输入任务回车后,自动添加进列表,可删除练习2: axios+vue实现网络应用: 天气预报练习3: 音乐播放器 vue基础指令 vue实例的作用范围是什么: el

vue天气预报

qq_25741071的博客

09-16

740

<!DOCTYPE html> <html lang="en"> <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"> <ti.

参与评论您还未登录，请先登录后发表或查看评论

Vue实战，天气预报DEMO实例

01-12

Vue学习DEMO，参考其他人写的Vue的DEMO，但因为他的代码是vue-cli构建，不太懂用webpack所以直接照搬了全部的样式代码一级部分逻辑代码实现的纯静态页面，无需npm，都是很基础的vue应用

基于Vue的天气客户端Weather_Vue.zip

07-19

标签：Weather

开发一个基于 Vue 的个人天气预报

GitChat

01-06

5621

本场 Chat 是一个基于 Vue 的个人天气预报项目，就是兴趣所致，做来玩玩。顺便扩展一下知识面。本项目会采用高德地图 API，Echarts 可视化库和 Vue 相关的技术来开发本项目。有兴趣的同学，可以一起来玩玩。本场 Chat 你将学到如下内容：学会制作自己的天气预报；学会使用部分高德地图的 API；学会使用 Echarts的部分 API； Vue+Webpack 相关的一些技...

Vue实例练习——图片切换

qq_39332845的博客

03-09

642

1. 功能描述点击上一张或下一张，实现图片轮播。注意在第一张和最后一张图片上分别隐藏上一张或下一张图标。 2. html代码 <div id="app"> <img id="left" src="images/left.jpg" @click="prev" v-show="picId>1"> <img id="pics" :src="picSrc"> <img id="right" src="images/right.jpg" @click="nxt"

Vue实例练习——简易音乐播放器

qq_39332845的博客

03-10

796

一、功能描述实现音乐播放器的部分基本功能，包括歌曲（歌手）搜索，播放/暂停音乐，播放/暂停mv，显示热门评论。 2. html代码（语义化做的不好，在学了在学了） <div id="container"> <div id="top"> <img src="images/netease.png"> <input id="srchbar" type="text" v-model="ipt" @keyup

vue实例练习和vue样式练习

qq_53366282的博客

03-18

1378

目录 vue实例练习和vue样式练习 1.vue实例练习 2.vue样式练习 vue实例练习和vue样式练习 1.vue实例练习 <head> <title>vue实例演示</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <!-- 过滤器的两种写法 -

Vue 学习04——Vue实例讲解（@blur / 计算属性）

Sicily_winner的博客

01-10

1348

㋀㏩目录 part1 -CreateVue data中this的用法 @blur this @blur gif 效果图 this 总结 part 2 -data property part 3 -Vue mthods mounted 挂载完成再执行 mounted demo mounted gif 动图 part 3 -computed computed...

vue-mini-weather:基于Vue开发的迷你实时天气预报组件

05-14

基于Vue开发的迷你实时天气预报组件项目展示基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要下载只能切换npm源为官方源。 npm i vue-mini-weather --save // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <template> <v></v> </template> // 2. 局部引入 //a

vue期末作业天气预报(可发布小程序)

最新发布

06-30

vue期末作业天气预报(可发布小程序)

vueweather一个基于elementui的简单天气演示

08-12

vue-weather 一个基于element-ui的简单天气演示

Ajax天气预报案例（使用模板引擎渲染）.zip

03-23

jquery中Ajax的使用，跨域使用接口查询各地天气预报，详细流程注释，简单易懂，以及模板引擎templ-web的简单运营，免去拼接字符串的繁琐-（需要修改接口appkey后才能使用）

利用Vue技术写的天气预报页面

04-02

1、利用Vue技术 2、可以在里面学习基础的Vue语法使用 3、比较适合初学者学习 4、高效的利用前端技术，进行整合。 5、没有使用javascript的繁琐的dom技术，利用Vue的数据同步能力能够更好的适应当前技术

vue 项目 web端如何实现天气预报1

JKC_HOWL的博客

04-26

819

自动定位天气信息 1.拿到当前电脑ip 2.高德接口获取ip的地址 3.通过和风天气获取城市id 4.通过id获取实时天气高德API：https://lbs.amap.com/api/webservice/guide/api/ipconfig 和风天气：https://dev.qweather.com/docs/api/weather/weather-now/ 拿到当前IP 一、在index.js里引入 <script src="http://pv.sohu.com/cityjson

使用Vue写天气预报

刘小杨的博客

08-25

1105

大家好，根据这几天的情况来看，相比大家对Vue并不陌生吧，我在写代码中的就不写注释了。 <!-- * @Author: your name * @Date: 2021-08-24 09:44:51 * @LastEditTime: 2021-08-25 17:00:32 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: \vue课时作业\八月金课.html

Vue技术9.1天气案例

qq_40713201的博客

08-04

321

代码】Vue技术9.1天气案例。

05-vue(vue动画出现的天气预报搜索,补充事件对象$event,单文件组件依赖包安装,组件结构,如何在组件中引入其他组件,京东页面制作用组件中引入其他组件做,组件中如何使用外部插件)

Tangoneone的博客

05-09

451

01-案例-天气预报查询: <!DOCTYPE html> <html lang="en"> <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" /> &lt