vue+axios天气查询——天知道效果展示及源码分析

最新推荐文章于 2024-05-20 19:30:49 发布

月下绯烟

最新推荐文章于 2024-05-20 19:30:49 发布

阅读量467

点赞数

分类专栏： Vue 文章标签： vue 天气查询 axios

本文链接：https://blog.csdn.net/qq_45654741/article/details/114171419

版权

Vue 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

使用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-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js"></script>
</head>

<body>
    <!-- 天气查询
    回车查询
        1按下回车v-on.enter
        2查询数据axios接口v-model
        3渲染数据v-for that
    点击查询 
        1点击城市v-on自定义参数
        2查询数据 this.()方法
        3渲染数据-->
    <div id="app">
        <div class="search_form">
            <div class="logo"><img src="img/logo.png" alt="logo" /></div>
            <div class="form_group">
                <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="searchWeather" />
                <button class="input_sub" @click="searchWeather">
                搜 索
              </button>
            </div>
            <div class="hotkey">
                <a href="javascript:;" v-for="city in hotCitys" @click="changeCity(city)">{{ city }}</a>
            </div>
        </div>
        <ul class="weather_list">
            <li v-for="(item,index) in weatherList" :key="item.date" :style="{transitionDelay:index*100+'ms'}">
                <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>

</body>

</html>

window.onload = function() {
    var app = new Vue({
        el: '#app',
        data: {
            city: '',
            hotCitys: ['北京', '上海', '广州', '深圳'],
            weatherList: []
        },
        methods: {
            searchWeather() {
                // console.log(this.city);
                var that = this
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                    .then(function(res) {
                        // console.log(res.data.data.forecast);
                        that.weatherList = res.data.data.forecast
                    }).catch(function(err) {
                        console.log(err);
                    })
            },
            changeCity(city) {
                this.city = city
                this.searchWeather()
            }
        }
    })
}

body {
    font-family: 'Microsoft YaHei';
}

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塌陷 */

.clearfix:before,
.clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */
    /* background:#8fd5f4; */
    /* background: linear-gradient(#6bc6ee, #fff); */
    background: #fff;
}

.search_form {
    width: 640px;
    margin: 100px auto 0;
}

.logo img {
    display: block;
    margin: 0 auto;
}

.form_group {
    width: 640px;
    height: 40px;
    margin-top: 45px;
}

.input_txt {
    width: 538px;
    height: 38px;
    padding: 0px;
    float: left;
    border: 1px solid #41a1cb;
    outline: none;
    text-indent: 10px;
}

.input_sub {
    width: 100px;
    height: 40px;
    border: 0px;
    float: left;
    background-color: #41a1cb;
    color: #fff;
    font-size: 16px;
    outline: none;
    cursor: pointer;
    position: relative;
}

.input_sub.loading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../img/loading.gif');
}

.hotkey {
    margin: 3px 0 0 2px;
}

.hotkey a {
    font-size: 14px;
    color: #666;
    padding-right: 15px;
}

.weather_list {
    height: 200px;
    text-align: center;
    margin-top: 50px;
    font-size: 0px;
}

.weather_list li {
    display: inline-block;
    width: 140px;
    height: 200px;
    padding: 0 10px;
    overflow: hidden;
    position: relative;
    background: url('./img/line.png') right center no-repeat;
    background-size: 1px 130px;
}

.weather_list li:last-child {
    background: none;
}


/* .weather_list .col02{
    background-color: rgba(65, 165, 158, 0.8);
}
.weather_list .col03{
    background-color: rgba(94, 194, 237, 0.8);
}
.weather_list .col04{
    background-color: rgba(69, 137, 176, 0.8);
}
.weather_list .col05{
    background-color: rgba(118, 113, 223, 0.8);
} */

.info_date {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #999;
    font-size: 14px;
    left: 0px;
    bottom: 0px;
    margin-top: 15px;
}

.info_date b {
    float: left;
    margin-left: 15px;
}

.info_type span {
    color: #fda252;
    font-size: 30px;
    line-height: 80px;
}

.info_temp {
    font-size: 14px;
    color: #fda252;
}

.info_temp b {
    font-size: 13px;
}

.tem .iconfont {
    font-size: 50px;
}

图片部分可以网上自己找，也可以删了关于图片的code

月下绯烟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue+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-width, initial-scale=1.0">
复制链接

扫一扫