【VUE】【axios】天气查询小案例-移动开发

主要知识点axios数据的获取传送数组数据（里面装对象）的显示axios链接中未知变量的获取方式点击替换文本框中内容，形参~!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8meta http-equiv=X-UA-...

主要知识点

axios数据的获取&传送
数组数据（里面装对象）的显示
axios链接中未知变量的获取方式
点击替换文本框中内容，形参~

<!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>天气查询</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官方axios在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- <script src="main.js"></script> -->
    <!-- 请求地址：http://wthrcdn.etouch.cn/weather_mini
    示例：http://wthrcdn.etouch.cn/weather_mini?city=深圳
    请求方法：get
    请求参数：city -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #app {
            margin: 100px auto;
            text-align: center;
        }
        
        #app ul {
            margin: 0 auto;
            text-align: center;
            width: 850px;
            height: 80px;
        }
        
        input {
            outline: none;
            width: 300px;
            height: 35px;
            font-size: 18px;
        }
        
        button {
            height: 37px;
        }
        
        a {
            text-decoration: none;
            color: grey;
        }
        
        li {
            float: left;
            list-style: none;
            width: 170px;
            height: 70px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>天知道</h2>
        <input type="text" placeholder="请输入查询的城市名称…" v-model="cityName" @keyup.enter="getCity">
        <button>搜索</button>
        <br>
        <span>
        <a href="#" v-for="aa in arr" @click="transform(aa)">{{aa}}&nbsp;</a>
        </span>
        <ul>
            <li v-for="aaa in weatherCondition">
                <!-- 对象的数值获取就是用.的 -->
                {{aaa.data}}
                <br> {{aaa.type}}
                <br> {{aaa.low}}~{{aaa.high}} &nbsp;&nbsp;&nbsp;
                <br> 风向：{{aaa.fengxiang}}
            </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["北京", "上海", "广州", "深圳"],
                cityName: "南昌",
                weatherCondition: []
            },
            methods: {
                getCity: function() {
                    // cityName内容用字符串的形式传过去~~
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.cityName).then((response) => {
                        // console.log(response.data.data.forecast);
                        this.weatherCondition = response.data.data.forecast;

                    }, (error) => {
                        console.log(error);
                    })
                },
                transform: function(aa) {
                    this.cityName = aa; //我想到了形参，我真棒hhhh
                    axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.cityName).then((response) => {
                        this.weatherCondition = response.data.data.forecast;
                    })

                }
            }
        })
    </script>
</body>

</html>

主要知识点

基础教程推荐