vue发送AJAX请求

一、简介

1)vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。
2) axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护。

二、使用axios发送AJAX请求

1、安装axios并引入

1)npm的方式: $ npm install axios -S

2)bower的方式:$ bower install axios

3)cdn的方式:

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

2、基本用法

axios([options])

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>axios发送ajax请求基本用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="send">发送ajax请求</button>
    </div>
    <script>
    //当我们导入vue.js包之后 在浏览器内存中 就多了一个Vue构造函数
        new Vue({
            el:"#app",
            methods:{
                send(){
                    axios({
                       method:'get',
					   // 发ajax请求,用以获取数据,此处地址意思是查询 github中 vue 星数最高的项目
                        url:'https://api.github.com/search/repositories?q=vue&sort=stars'
                    }).then(function(res){
                        console.log(res.data.items[0]);
                    });
                }
            }
        });
    </script>
</body>
</html>

点击按钮后,控制台输出结果:
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页