用Vue实现天知道案例——天气预报

最新推荐文章于 2024-05-16 22:12:07 发布
最新推荐文章于 2024-05-16 22:12:07 发布
阅读量3.5k 收藏 49
点赞数 4
分类专栏： 前端 文章标签： css html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/124052047
版权

用Vue实现天知道案例——天气预报

需求

  1. 按下回车或者搜索实现搜索天气
  2. 查询数据（axios接口v-model)
  3. 渲染数据（v-for)

请求路径

  1. 请求地址

http://wthrcdn.etouch.cn/weather_mini

  1. 请求方式 get
  2. 请求参数 city(查询的城市名）
  3. 响应内容：天气信息

全部代码

<!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">
    <title>天知道</title>
</head>
<style>
    #weather{
        width: 1100px;
        height: 500px;
        margin: 150px auto;
    }
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    @font-face {
        font-family: 'iconfont';
        src: url('font2/iconfont.eot');
        src: url('font2/iconfont.eot?#iefix') format('embedded-opentype'),
            url('font2/iconfont.woff2') format('woff2'),
            url('font2/iconfont.woff') format('woff'),
            url('font2/iconfont.ttf') format('truetype'),
            url('font2/iconfont.svg#iconfont') format('svg');
    }
    .iconfont {
        font-family: "iconfont" !important;
        font-size: 50px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    header{
        margin: 150px auto 50px;
        width: 200px;
        height: 50px;
    }
    .one{
        color: #00a4ff;
    }
    .two{
        color: rgb(144, 214, 38);
    }
    .three{
        color: rgb(255, 187, 0);
    }
    .search{
        width: 800px;
        height: 50px;
        border: 1px solid #00a4ff;
        margin: 0 auto;
    }
    .insearch{
        float: right;
        display: block;
        width: 150px;
        height: 50px;
        background-color: #00a4ff;
        color: #fff;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
    }
    .decorate{
        border:none;
        width: 600px;
        margin: 0 20px;
        height: 48px;
        outline: none;
        font-size:20px;
        font-weight: 200;
    }
    .hotKey{
        margin: 10px 160px;
    }
    .hotKey a{
        text-decoration: none;
        color: #666;
        margin: 0 4px;
    }
    .hotKey a:hover{
        color:yellowgreen;
    }
    h2,
    .tem{
        color: orange;
        text-align: center;
    }
    .display ul{
        margin: 100px 0;
    }
    h2{
        font-size: 30px;
        margin: 18px;
    }
    .day{
        color: rgb(165, 165, 165);
        text-align: center;
        margin-top: 15px;
    }
    ul li{
        display: inline-block;
        width: 200px;
        height: 150px;
        border-right: 1px solid #ccc;
    }
    ul li:last-child{
        border:none;
    }
</style>
<body>
    <div id="weather">
        <header>
            <span class="iconfont one">&#xe605;</span>
            <span class="iconfont two">&#xe60a;</span>
            <span class="iconfont three">&#xe651;</span>
        </header>
        <div class="search">
            <input type="text" class="decorate" placeholder="请输入查询的天气" v-model="now" @keyup.enter="query">
            <span class="insearch" @click="query">搜   索</span>
        </div>
        <div class="hotKey"> 
            <a href="javascript:;" @click="exa('北京')">北京</a>
            <a href="javascript:;" @click="exa('上海')">上海</a>
            <a href="javascript:;" @click="exa('西安')">西安</a>
            <a href="javascript:;" @click="exa('深圳')">深圳</a>
        </div>
        <div class="display">
            <ul>
                <li v-for="item in weatherList">
                    <h2>{{item.type}}</h2>
                    <div class="tem">
                        <span>{{item.low}}</span>
                        <span>~</span>
                        <span>{{item.high}}</span>
                    </div>
                    <div class="day">{{item.date}}</div>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var weather=new Vue({
            el:"#weather",
            data:{
                weatherList:[],
                now:""
            },
            methods:{
                exa:function(now){
                    this.now=now;
                    this.query();
                },
                query:function(){
                    var that=this;
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.now).then(function(response){
                        that.weatherList=response.data.data.forecast;
                    }).catch(function(err){
                        console.log(err);
                        
                    })
                }
            }
        })
    </script>
</body>
</html>

成果展示

请添加图片描述

VillanelleS
关注
  • 4
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue 网络应用 - 天知道（天气预报）
06-23
包含css、图片资源
使用Google Weather API 制作天气预报应用
alhan的专栏
08-04 1584
大家在使用android手机的时候，肯定都是用过天气预报的应用，market上面已经有了不少很成熟的产品．当然，作为开发者而言，一定会对这种应用的开发很感兴趣，我们自己来写一款类似的应用. 首先，要开发一款天气预报应用，一定要有一个web服务端来提供数据，这个数据源我们自己肯定是没办法弄的，所以就需要一个第三方机构为我们提供天气数据．这种机构其实有很多，不过大多数都是收费的，当然这些收费的数据源
Web前端最全Vue快速入门（附实战小项目：记事本、天气预报、音乐播放器）(3)，web高级前端面试题
最新发布
2401_84620303的博客
05-16 561
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】left: 0px;top: 0px;z-index: 1;top: 0px;前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-mub85Khy-1715868703562)]
天气预报的实现分析
lolwemer的博客
12-15 1251
1.运行效果图        2.核心代码 WeatherActivity。java  MainActivity public class WeatherActivity extends Activity implements OnClickListener{ private LinearLayout weatherInfoLayout; /**
数据可视化大屏引入天气组件（vue2）
Awritethecodemonkey的博客
04-12 1155
数据可视化大屏引入天气组件vue-mini-weather的使用
VUE实现天气预报查询
忙碌的黛玉
03-15 1305
vue实现天气预报查询小demo
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项目中可使用天气预报小组件推荐vue-mini-weather
热门推荐
deciduous_leaves的博客
05-16 1万+
该部分内容引自基于Vue开发的迷你实时天气预报组件 由于该组件在2021.4.24日刚上传到npm仓库，请用npm安装！ 1、安装 npm i vue-mini-weather --save 2、引入 // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <template> ......
好用的天气组件：vue3-mini-weather
G55331337547的博客
12-15 2938
在逛gitghub时发现一个非常好用的天气组件，可以实时呈现天气状况，可以应用到vue3项目中(gitHub中也有vue2版本的)，只需几行代码就可实现。
Vue --天气应用
qq_43712409的博客
08-29 328
自定义参数可以让代码的复用性更高 methods 中定义的方法内部，可以通过 this 关键字点出其他的方法 <!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-U.
在VUE中使用中国天气网插件
yun的博客
09-15 1956
第一步 在中国天气网根据自己的需要修改配置并生成代码 中国天气网：创建网页标准天气插件 第二步 html <div id="weather-v2-plugin-standard"></div> js mounted() { //天气插件配置 window.WIDGET = { CONFIG: { layout: 2, width: "386", height: "356", backgrou
Vue实战，天气预报DEMO实例
01-12
Vue学习DEMO，参考其他人写的Vue的DEMO，但因为他的代码是vue-cli构建，不太懂用webpack所以直接照搬了全部的样式代码一级部分逻辑代码实现的纯静态页面，无需npm，都是很基础的vue应用
Vue-axios天气预报
08-17
VUE天气预报，html，js代码&css样式，可直接打开查看。
基于vue与e-chart实现的天气预报网页
12-30
在本项目中，我们主要探讨的是如何利用Vue.js框架与ECharts库来构建一个功能完善的天气预报网页。Vue.js是一个轻量级、高性能的前端JavaScript框架，它以其易学易用、灵活性高以及组件化开发的特点深受开发者喜爱。...
利用Vue技术写的天气预报页面
04-02
1、利用Vue技术 2、可以在里面学习基础的Vue语法使用 3、比较适合初学者学习 4、高效的利用前端技术，进行整合。 5、没有使用javascript的繁琐的dom技术，利用Vue的数据同步能力能够更好的适应当前技术
vue实现购物车小案例
12-13
本文实例为大家分享了vue实现购物车小案例的具体代码，供大家参考，具体内容如下 最终效果 HTML部分： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...
fileapp:electron-vue 实现手机文件管理—— 文件助手
05-06
fileappelectron-vue 实现手机文件管理—— 文件助手我的环境npm -v6.9.0npde -vv12.4.0electron -vv7.0.0安装运行# 安装yarn## ornpm install# 运行yarn run dev## ornpm run devfile中是我的测试路径，需要修改...
【vue学习】6.天气app-天知道
weixin_41908867的博客
09-28 769
【vue学习】6.天气app-天知道 vue页面 <!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
利用vue 制作简易的天气查询
吃辣椒的鱼
06-17 889
前瞻： 需要用到的工具 vue在线地址 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> axios在线地址 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 以及天气API 请求方法：get 请求参数：city(城市名) 相应内容：天气信息 http://wthrcdn.etouch.c
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组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值