vue使用vue-resource插件请求数据

作者: coffee1949 | 来源:发表于2019-06-07 21:34 被阅读0次

CDN方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-resource</title>
    <script type="text/javascript" src="vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
    <div id="app">
        
    </div>
    <script type="text/javascript">
        var app = new Vue({
            data: {

            },
            computed: {

            },
            mounted(){
                console.log(this.$http)
                this.$http.get('https://api.apiopen.top/getSingleJoke?sid=28654780').then((res)=>{
                    console.log('res:',res)
                })
            }
        }).$mount('#app')

    </script>
</body>
</html>

脚手架方式：

1.  npm i vue-resource --save    //安装
2.  在main.js中引入，并使用
    import VueResource from 'vue-resource'
    Vue.use(VueResource)
3.  这个是官方插件,会直接在根组件注入一个$http变量
    在所有的子组件直接使用this.$http.get().then(function(){})即可，无需引入