Vue基础和axios的基本使用

2020/2/18 20:17:42 人评论 次浏览 分类:学习教程

Vue基础和axios的基本使用

最近开始学vue,看了黑马视频写点记录。

标签注册点击事件 @click=“searchWeather()” 、@click=“changeCity(‘北京’)”
键盘回车事件 @keyup.enter=“searchWeather”
天气接口 http://wthrcdn.etouch.cn/weather_mini
v-for=“item in weatherList” 通过item.name 调用数组内的信息

html、css代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue天气</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .search_form{
            margin: 0 auto;
            width: 80%;
            margin-top: 300px;
        }
        .logo{
            margin: 0 auto;
            width: 200px;
        }
        .form_group{
            margin: 0 auto;
            width: 700px;
            display: flex;
        }
        .input_txt{
            margin: 0 auto;
            width: 620px;
            height: 30px;
        }
        .input_sub{
            width: 80px;
            height: 34px;
            background-color: #54a0ff;
        }
        .hotkey{
            margin: 0 auto;
            width: 700px;
        }
        .hotkey>a{
            list-style: none;
            text-decoration: none;
            color: black;
        }
        .weather_list{
            display: flex;
            margin-top: 70px;
            margin: 0 auto;
            width: 900px;
            text-align: center;
        }
        .weather_list>li{
            list-style: none;
            margin: 0 10px;
        }
        .iconfont{
            font-size: 50px;
            color: goldenrod;
            
        }
        .infotemp{
            color: goldenrod;
        }
    </style>
</head>
<body>
     <div class="wrap" id="app">
         <div class="search_form">
             <div class="logo">
                 <img src="./imgs/weather_128px_1221676_easyicon.net.png" alt="logo">
             </div>
             <div class="form_group">
                 <input type="text" v-model="city" @keyup.enter="searchWeather" 
                 class="input_txt"
                 placeholder="请输入查询的天气">
                 <button class="input_sub" @click="searchWeather()">
                     搜索
                 </button>
             </div>
             <div class="hotkey">
                 <a href="javascript:;" @click="changeCity('北京')">北京</a>
                 <a href="javascript:;" @click="changeCity('上海')">上海</a>
                 <a href="javascript:;" @click="changeCity('广州')">广州</a>
                 <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
             </div>
         </div>
         <ul class="weather_list">
             <li v-for="item in weatherList">
                 <div class="info_type"><span class="iconfont">{{item.type}}</span></div>
                 <div class="infotemp">
                     <b>{{item.low}}</b>
                     ~
                     <b>{{item.high}}</b>
                 </div>
                 <div class="info_date"><span>{{item.date}}</span></div>
             </li>
         </ul>
     </div>
</body>
</html>

js代码块

	<script>
        var app = new Vue({
            el:'#app',
            data:{
                city:'',
                weatherList:[],
            },
            methods:{
                searchWeather:function(){
                    var that = this;
                    axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
                    .then(function(response){
                        console.log(response.data.data.forecast);
                        that.weatherList = response.data.data.forecast;
                    }).catch(function(err){

                    })
                },
                changeCity:function(city){
                    this.city = city;
                    this.searchWeather();
                }
            }
        })
     </script>

效果如下:
在这里插入图片描述

涵烁
发布了38 篇原创文章 · 获赞 3 · 访问量 6903
私信 关注

相关资讯

    暂无相关的资讯...

共有访客发表了评论 网友评论

验证码: 看不清楚?
    -->