3.天知道

天知道

准备

1.接口：

http://wthrcdn.etouch.cn/weather_mini?city=
//get请求

2.引入axios与vue文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3.项目文件

index.html , css/style.css , main.js

功能

1.回车查询渲染天气
2.点击城市查询

分析

1.点击input回车查询（v-on,enter）
2.查询数据 （axios接口 v-model）
3.渲染数据（v-for，that存储this）、

代码

index.html

<!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">
    <link rel="stylesheet" href="css/style.css">

    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="weather-top">
            <h1>天知道</h1>
            <input type="text" @keyup.enter="getWeather" v-model="city" placeholder="请查询天气">
            <button @click="clickCity">搜索</button>
            <dl>
                <dd @click="getCity(city)" v-for="city in cityName">
                   {{city}}
                </dd>
            </dl>
        </div>
        <div class="weather-ctn">
            <ul>
                <li v-for="item in List">
                    <h2>{{item.type}}</h2>
                    <h4>{{item.low}}~{{item.high}}</h4>
                    <p>{{item.date}}</p>
                </li>
            </ul>
        </div>
        <div class="weather-foot">

        </div>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="../2.天知道/js/index.js"></script>
</html>

style.css

* {
    margin: 0px;
    padding: 0px;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

#app {
    width: 900px;
    padding: 60px 0px;
    margin: auto;
    background-color: aliceblue;
    margin-top: 30px;
}

.weather-top {
    text-align: center;
}

.weather-top h1 {
    color: teal;
    font-size: 30px;
}

.weather-top input {
    width: 400px;
    FONT-WEIGHT: 60px;
    height: 34px;
    border: none;
    outline: none;
    padding-left: 10px;
    margin-top: 30px;
}

.weather-top button {
    width: 50px;
    height: 34px;
    border: navajowhite;
    outline: none;
    transform: translateX(-5px);
    background: #eee;
    cursor: pointer;
}

.weather-top dl {
    display: flex;
    padding-left: 24%;
    margin-top: 5px;
}

.weather-top dd {
    font-size: 12px;
    margin: 0px 4px;
    cursor: pointer;
}

.weather-top dd:hover {
    color: rgb(238, 184, 184);
}

.weather-ctn {
    margin-top: 60px;
}

.weather-ctn ul {
    display: flex;
    justify-content: space-around;
}

.weather-ctn ul li {
    width: 20%;
    text-align: center;
}

.weather-ctn h4 {
    margin: 10px 0px;
}

.weather-ctn h4,
.weather-ctn h2 {
    color: rgb(219, 184, 28);
}

.weather-ctn p {
    font-weight: bold;
}

.weather-ctn ul li:nth-of-type(2n) {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

main.js

var app=new Vue({
    el:'#app',
    data:{
        city:"",
        // 创建数组
        List:[],
        cityName:["武汉","北京","海南"]
    },
    methods:{
        getWeather:function(){
            // console.log("aa");
            // 调用接口http://wthrcdn.etouch.cn/weather_mini?city=
             // 全局存储this
            var that=this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city).then(
                function(response){
                    // console.log(response.data.data.forecast);
                    that.List=response.data.data.forecast;
                    // console.log(that.List);
                
                }
            ).catch(function(arr){
                console.log(arr);
            })
        },
        getCity:function(city){
               this.city=city; 
               this.getWeather();

        },
        clickCity:function(){
            this.getWeather();
        }
    }
})

渲染效果

image

posted @ 2021-10-30 22:04  禾耳  阅读(99)  评论(0)    收藏  举报