axios的一些东西

写法一
写法二

<template>
    <div>
        <el-input v-model="scity" placeholder="请输入城市"></el-input>
        <el-button type="primary" @click="getWeatherInfo">获取天气</el-button>
        <el-card>
            {{ city }} &nbsp;&nbsp;&nbsp; {{ wendu }} &nbsp;&nbsp;&nbsp;
            {{ ganmao }}
        </el-card>
        <ul style="list-style: none">
            <li v-for="(item, index) in forecast" :key="index">
                {{ item.date }}{{ item.high }}{{ item.low }}{{ item.type }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "SubWeather",
    data() {
        return { scity: "", city: "", wendu: "", ganmao: "", forecast: [] };
    },
    props: [],
    components: {},
    created() {},
    mounted() {},
    methods: {
        getWeatherInfo() {
            let _this = this;
            this.$axios
                .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.scity}`)
                .then(
                    function (res) {
                        _this.city = res.data.data.city;
                        _this.wendu = res.data.data.wendu;
                        _this.ganmao = res.data.data.ganmao;
                        _this.forecast = res.data.data.forecast;
                    },
                    function (err) {
                        console.log(err);
                    }
                );
        },
    },
};
</script>

<style lang="css" scoped>
</style>

<template>
    <div>
        <el-input v-model="scity" placeholder="请输入城市"></el-input>
        <el-button type="primary" @click="getWeatherInfo">获取天气</el-button>
        <el-card>
            {{ city }} &nbsp;&nbsp;&nbsp; {{ wendu }} &nbsp;&nbsp;&nbsp;
            {{ ganmao }}
        </el-card>
        <ul style="list-style: none">
            <li v-for="(item, index) in forecast" :key="index">
                {{ item.date }}{{ item.high }}{{ item.low }}{{ item.type }}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "SubWeather",
    data() {
        return { scity: "", city: "", wendu: "", ganmao: "", forecast: [] };
    },
    props: [],
    components: {},
    created() {},
    mounted() {},
    methods: {
        getWeatherInfo() {
            let _this = this;
            this.$axios
                .get("http://wthrcdn.etouch.cn/weather_mini?city="+this.scity)
                .then(
                    function (res) {
                        _this.city = res.data.data.city;
                        _this.wendu = res.data.data.wendu;
                        _this.ganmao = res.data.data.ganmao;
                        _this.forecast = res.data.data.forecast;
                    },
                    function (err) {
                        console.log(err);
                    }
                );
        },
    },
};
</script>

<style lang="css" scoped>
</style>

以上两种写法都可以

`注意点：`

.then 回调函数里取不到vue的this实例

解决方法：使用前先赋值给其他变量 let _this = this;

两种不同的url形式

"http://wthrcdn.etouch.cn/weather_mini?city="+this.scity

`http://wthrcdn.etouch.cn/weather_mini?city=${this.scity}`

post

        getInfo() {
            let _this = this;
            this.$axios
                .post("https://autumnfish.cn/api/user/reg", {
                    username: this.uName,
                })
                .then(
                    function (response) {
                        console.log(response.data);
                        _this.msg = response.data;
                    },
                    function (error) {
                        console.log(error);
                    }
                );
        },

Vue学习笔记文章被收录于专栏

Vue相关