axios+vue整合和小demo

<div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <h1>
            {{ joke }}
        </h1>
    </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>
        let vue = new Vue({
            el: "#app",
            data: {
                joke: ""
            },
            methods: {
                getJoke: function () {
                    let that = this;
                    axios.get("https://autumnfish.cn/api/joke")
                        .then(function (response) {
                            console.log(response);
                            that.joke = response.data;
                        }, function (err) {
                            console.log(err);
                        })
                }
            }
        })
    </script>

注意：

axios回调函数中的this已经改变，无法访问到data中的数据
可以通过在还没有使用axios时，使用一个变量将this存储起来。

天知道小demo

说明：

1.输入框输入城市回车查询功能
2.输入框输入城市点击搜索查询功能
3.点击热门城市直接查询功能

HTML:

<div id="app">
        <h1>天知道</h1>
        <input type="text" v-model="city" placeholder="请输入要查询天气的城市" @keyup.enter="serchWeath(city)">
        <input type="button" value="搜索" @click="serchWeath"> <br>
        <a href="#" @click="getWeath('深圳')">深圳</a>
        <a href="#" @click="getWeath('北京')">北京</a>
        <a href="#" @click="getWeath('杭州')">杭州</a>
        <a href="#" @click="getWeath('上海')">上海</a>
        <div v-for="(item,index) in weathList">
            <h4>{{ item.type }}</h4>
            <h6>{{item.low}} ~ {{item.high}}</h6>
            <h5>{{ item.date}}</h5>
        </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 src="js/main.js"></script>

main.js

let vue = new Vue({
    el: "#app",
    data: {
        city: "",
        weathList: []
    },
    methods: {
        serchWeath: function () {
            let that = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city)
                .then(function (response) {
                    console.log(response);
                    that.weathList = response.data.data.forecast;
                })
        },
        getWeath: function (city) {
            this.city = city;
            this.serchWeath();
        }
    }
});

效果：