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

用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">span>
            <span class="iconfont two">span>
            <span class="iconfont three">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>

成果展示

用Vue实现天知道案例——天气预报_第1张图片

你可能感兴趣的:(前端,css,html5,vue.js)