VUE学习案例——《天知道》天气查询功能

最新推荐文章于 2022-12-16 14:27:02 发布
最新推荐文章于 2022-12-16 14:27:02 发布
阅读量1.7k 收藏 5
点赞数 2
分类专栏： vue 文章标签： vue javascript html5 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuking_hong/article/details/115692911
版权
本文通过一个实例讲解如何使用Vue.js构建一个天气查询应用。用户可以输入城市名，应用将展示该城市未来五天的天气预报。涉及到的技术包括Vue.js、JavaScript和HTML5。
摘要由CSDN通过智能技术生成

 样子如下图。功能是：输入需要查询的城市，下面相应的出现未来5天的天气预报。

 

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #main h2 {
            padding-bottom: 30px;
        }

        #main {
            width: 600px;
            margin: 50px auto;
            text-align: center;
        }

        #city {
            float: left;
            width: 450px;
            height: 40px;
            paddi
最低0.47元/天 解锁文章
YuKing_HONG
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
vue基础（四）----天知道（天气查询）
weixin_43370373的博客
07-05 613
Vue结合网络数据开发应用 axios（网络请求库） axios+vue 强大的网络请求库： 语法 <!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-.
vue网络项目——天知道
wcy8733996wcy的博客
01-28 1105
B站小项目（天知道），记录一下。 一、实现效果 1.输入要查询的城市，回车，返回该城市近五天的天气情况 2.点击输入框下面的城市，输入框内容自动变成刚才点击的城市，并返回该城市近五天的天气情况 二、运行界面 三、代码 html+css <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{
六、VUE基础——axios+vue(天知道案例)
qq_41841658的博客
03-30 848
一、vue+axios结合使用获取随机笑话 在vue中使用axios发送请求，这里使用的是get请求方法，也可以使用post方法 1.步骤 导入vue和axios，这两个引入的先后顺序无所谓，但是一定要保证在开始写vue代码之前引入 使用v-on绑定click事件，在p标签中显示获取的笑话内容 在vue中写获取笑话的逻辑，即使用axios.get().then()方法获取随机笑话 2.代码实例 <!DOCTYPE html> <html lang="en">.
b站黑马的Vue快速入门案例代码——【axios+Vue2】天知道（天气信息查询功能）
weixin_72322475的博客
12-16 3457
b站黑马的Vue快速入门案例代码——【axios+Vue2】天知道（天气信息查询功能）。！！！该案例需要更换原代码接口为本文新接口，在{{}}中根据新接口也要进行修改，才能在页面渲染数据成功。
VUE学习案例--天知道
Duhangyu_01的博客
07-01 162
Reset.css #reset.css body,ul,h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; } a{ text-decoration:none; } ul{ list-style:none; } img{ border:0px; } /* 清除浮动，解决margin-top塌陷 *.
Vue第一天学习总结—— Vue全家桶之Vue基础(Vue概述、Vue基本使用、Vue模板语法、基础案例——选项卡、Vue常用特性、综合案例-图书管理 )
weixin_52819925的博客
08-26 547
(一) Vue概述 我使用的vue版本是v2.5.17 1. 介绍——Vue：渐进式JavaScript框架 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue 灵活：在一个库和一套完整框架之间自如伸缩 高效：20kB运行大小，超快虚拟 DOM 框架：vue就是一个框架，提供了很多基础性服务，比如虚拟DOM技术，双向绑定技术 框架则是为解决一个(一类)问题而开发的产品 （是一个解决方案） 使用框架就不一样，我
Day7：Vue入门学习——传智播客学习笔记【微服务电商】
weixin_43895667的博客
02-21 1132
本节依旧是前端内容，但还是了解一下基础的入门知识 学习目标 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 0. 前言 前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们...
直接学 Vue 3 吧 —— 对话 Vue.js 作者尤雨溪
geejkse_seff的博客
03-02 503
《程序员》于 2000 年创刊，其理念为技术改变世界，创新驱动中国。2021 年，《新程序员》 全新起航，首期以「开发者的黄金十年」为主题，以音视频、图文专栏等丰富的多媒体形式为载体，立足当下，放眼未来，为读者带来全方位的技术和产业解读。 本文为《新程序员》第一期内容，在 UNIX 开发者 Brian W. Kernighan 之后，我们采访到 Vue.js 的作者尤雨溪，与其共谈精彩程序人生、共论顶级开源项目的成功之道。 从复杂的 jQuery 插件化开发到模块化及组件化，现代前端技术在迭代的过程中不.
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
vue中根据时间戳判断对应的时间(今天 昨天 前天)
10-15
主要介绍了vue中 根据时间戳 判断对应的时间（今天 昨天 前天）,需要的朋友可以参考下
气象数据.img格式文件的详解和读取方法
03-21
.img文件，是气象数据常用文件，不是图片文件！，不能直接打开，系统会当成压缩包文件，这里详细写了.img格式文件的详解和读取方法
天气预报 json城市代码
10-13
天气预报 json城市代码wthrcdn.etouch.cn的接口http://wthrcdn.etouch.cn/weather_mini?citykey=
解析wthrcdn.etouch的xml格式天气存入mysql数据库
01-13
http://wthrcdn.etouch.cn/WeatherApi?citykey=101040100特别全面并且及时更新的接口，解析xml存入数据库。
Vue+axios网络应用---天知道天气查询
qq_46186155的博客
08-01 305
效果图 功能分析 1、在搜索框输入城市名称，按下回车在下面显示城市天气信息。 2、点击下面四个城市也可以显示该城市信息。 功能实现 1、通过axios调用接口获取城市天气信息 2、对城市信息处理展示在页面上 代码地址：GitHub地址 ...
Vue+axios基础项目实战——天知道（天气预报查询应用）
fy03164598的博客
03-01 2516
一、分析项目的业务逻辑 回车查询 按下回车 查询数据 渲染数据 点击查询 点击搜索或点击城市标签 查询数据 渲染数据 二、基础静态页面实现 1. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, ini..
基于Vue 和 axios 的天气查询案例（天知道）
qq_45018127的博客
06-30 540
基于Vue 和 axios 的天气查询案例（天知道）1、 先进行效果展示2、css(样式你可以自己看着改，怎么喜欢怎么来)3、html4、js(在写js之前，先引入axios.min.js和vue.js这两个文件哦) 1、 先进行效果展示 在搜索框里输入想要查询的天气的城市或选择下面的几个城市，就可以出来了，下面我们看看看代码吧~ 2、css(样式你可以自己看着改，怎么喜欢怎么来) #app { position: relative; display: inline-b
vue axios网络应用--天知道
weixin_52634719的博客
08-05 124
没讲css.讲的一般
Vue笔记整理，让你快速入门Vue.js：04_5.网络应用：（项目）天知道-点击查询
鲁迷那的专栏—坚持实践后再写出来！
06-24 270
点击事件 我们可以通过 v-on 指令进行绑定，修改文本框的值，本质就是修改 v-model 绑定的 data 中的数据的值。而天气查询的逻辑，和回车查询是完全一样的。只是我们需要点击来改变城市名，所以这里我们可以使用事件自定义参数，让代码更加的的灵活。 查询数据和渲染数据 我们在上一节回车查询已经实现过了，这里我们只需考虑如何的复用就行？类似于 data 中数据的使用，通过 this 关键字就可以啦，定义在methods 中的方法，我们也可以通过 this 关键字给点出来，加上括号...
vue-router应用——用户登录注册案例
最新发布
05-24
好的，下面我来为您介绍一下如何使用vue-router实现用户登录注册功能。 首先，我们需要安装vue-router，可以通过以下命令进行安装： ``` npm install vue-router --save ``` 然后，在main.js中引入并使用vue-router： ``` import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 接下来，我们新建一个router.js文件，用于配置路由。在该文件中，我们需要定义路由路径和路由组件： ``` import Vue from 'vue' import VueRouter from 'vue-router' import Login from './components/Login.vue' import Register from './components/Register.vue' Vue.use(VueRouter) const routes = [ { path: '/login', component: Login }, { path: '/register', component: Register } ] const router = new VueRouter({ routes }) export default router ``` 在上面的代码中，我们定义了两个路由路径：/login和/register，并分别对应了Login和Register两个组件。 接下来，在App.vue中，我们需要使用<router-view>标签来显示路由组件： ``` <template> <div id="app"> <router-view></router-view> </div> </template> ``` 最后，在main.js中引入router.js，并将其挂载到Vue实例中： ``` import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app') ``` 至此，我们已经完成了基本的路由配置。接下来，我们可以在Login和Register组件中实现具体的登录和注册功能。 在Login组件中，我们可以使用Vue.js提供的v-model指令来绑定表单输入的数据，并在点击登录按钮时向服务器发送请求验证用户名和密码： ``` <template> <div class="login"> <h1>登录</h1> <form> <label>用户名：</label> <input type="text" v-model="username"> <br> <label>密码：</label> <input type="password" v-model="password"> <br> <button @click.prevent="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 向服务器发送请求验证用户名和密码 } } } </script> ``` 而在Register组件中，我们可以使用v-model指令来绑定表单输入的数据，并在点击注册按钮时向服务器发送请求创建新用户： ``` <template> <div class="register"> <h1>注册</h1> <form> <label>用户名：</label> <input type="text" v-model="username"> <br> <label>密码：</label> <input type="password" v-model="password"> <br> <label>确认密码：</label> <input type="password" v-model="confirmPassword"> <br> <button @click.prevent="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '', confirmPassword: '' } }, methods: { register() { // 向服务器发送请求创建新用户 } } } </script> ``` 到这里，我们已经完成了一个简单的用户登录注册功能，并使用vue-router实现了路由跳转。当用户访问/login时，会显示Login组件；当用户访问/register时，会显示Register组件。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值