axios+vue.js实现一个简单的天气预报界面

这是一个最简单Vue.js实现天气预报的单页面界面，前端只用到了Vue.js和axios两个框架，效果如下图，声明这仅为个人的学习记录。

Html为骨架，Css为样式，Jscript控制行为

1.在html页面中引入axios和vue.js的框架，这里用到的开发环境版本。

<!--官网提供的axios在线地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.在body内搭建完html网页的主体部分

    <div class="wrap" id="app">
        <div class="search_form">
            <div class="logo"><img src="https://www.qixiangwang.cn/skins/Blue2012/images/index_02.jpg" alt='logo'></div>
            <div class='form-group'>
                <input type='text' class="input_txt"  @keyup.enter='searchWeather' v-model='city' 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="type">{{item.type}}</div>
                <div class="handl">{{item.high}}~{{item.low}}</div>
                <span>{{item.date}}</span>
                <!-- <span>{{item}}</span> -->
            </li>
            <!-- <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
    </div>
    

3.在style标签中调整网页的结构样式

    .wrap{
            width: 800px;
            height: 500px;
            /* background-color: rgb(240, 219, 216); */
            margin: 100px auto;
            text-align: center;
            position: relative;
            border: 1px solid black;
        }
        .wrap .form-group{
            margin-top: 30px;
            width: 800px;
            height: 50px;
            /* background-color: rgb(198, 243, 243); */
            position: relative;
        }
        .wrap .form-group .input_txt{
            width: 500px;
            height: 30px;
            outline: none;
            margin-right: 0px;
            position: absolute;
            left: 100px;
            border: 2px solid rgb(169, 169, 240);
        }
        .wrap .form-group .input_sub{
            width: 100px;
            height: 36px;
            border: none;
            outline: none;
            position: absolute;
            right: 92px;
            background-color:rgb(169, 169, 240) ;
            color: white;
            font-size: 16px;
        }
        .hotkey{
            position: absolute;
            left: 100px;
            
        }
        .hotkey a{
            margin-right: 10px;
            text-decoration: none;
            color: gray;
            font-size: 14px;
        }
        .weather_list{
            padding-left: 0px;
            margin-top: 60px;
            display: flex;
            width: 800px;
            height: 180px;
            /* background-color: rgb(217, 243, 217); */
            list-style: none;
        }
        .weather_list li{
            width: 160px;
            border-right: 1px solid black;
        }
        .weather_list li:last-child{
            border-right:none
        }
        .weather_list .type{
            font-size: 40px;
            color: rgb(245, 37, 37);
        }
        .weather_list .handl{
            margin-top: 20px;
            margin-bottom: 20px;
            font-size: 12px;
            color: rgb(245, 37, 37);
        }
        .weather_list span{
            font-size: 12px;
            color: gray;
        }

4.在script标签中，请求数据，并对监听的回车和点击事件做出反应。这里要注意一下，如果Jscript代码在body标签上面的话，一定要加上window.onload。（原因是因为javaScipt代码在上面的时候，往往body中它要操作的对象还没有加载完成，会导致无法获取操作对象报错）

window.onload = function () {
    var app = new Vue({
        el:'#app',
        data:{
            city:'',
            weatherlist:[{}]
        },
        methods:{
            searchWeather:function(){
                // console.log('天气查询');
                // console.log(this.city);
                //调用接口
                //保存this
                var that=this;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city='
                +this.city)
                .then(function(response){
                    // console.log(response);
                    // console.log(response.data.data.forecast);
                    that.weatherlist=response.data.data.forecast;
                })
                .catch(function(err){

                })
            },
            changeCity:function(city){
                this.city=city;
                this.searchWeather();
            }
        }
    })
}