vue 网络应用

vue 网络应用

网络请求必须要有文档接口，文档接口中有定义的参数，以及服务器响应时返回的值的类型

axios网络请求库

具体查看官网

导包后创建了全局对象axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

这里介绍两个常用的访问服务器的方法
axios.get(地址?key=value&key1=value1).then(function(response){},function(err){})
anxios.post(地址,{key:value,key1:value1}).then(function(response){},function(err){})

vue+axios

axios的请求方法中的回调函数的this是会改变的，所以我们可以在外面把this保存起来。

<div id="app">
    <p>{{ msg }}</p>
    <button @click="joke">随机产生一条笑话</button>
</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 app = new Vue({
        el: '#app',
        data: {
            msg: "这是笑话哈哈哈"
        },
        methods: {
            joke: function () {
                var that = this;
                axios.get("https://autumnfish.cn/api/joke").then(function (response) {
                    that.msg = response.data;
                }, function (err) { })

            }
        }
    });

</script>

如果在方法中要访问另外一个方法，用this,方法名称()