vue-axios安装

vue-axios + axios 入坑基础安装首先，有时候直接安装 axios 在 vuecil 会报错先安装！npm install axios然后！npm install --save axios vue-axios配置模板（index.js）import Vue from 'vue'import axios from 'axios'import Vue...

zh_is_code_world

3164人浏览 · 2018-08-17 17:11:56

zh_is_code_world · 2018-08-17 17:11:56 发布

vue-axios + axios 入坑基础安装

首先，有时候直接安装 axios 在 vuecil 会报错

先安装！

npm install axios

然后！

npm install --save axios vue-axios

配置模板（index.js）

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

在脚手架里面的用法！

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.axios.get(api).then((response) => {
  console.log(response.data)
})
 
this.$http.get(api).then((response) => {
  console.log(response.data)
})

自己写的一个简单例子有vue-resource和vue-axios：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-resource/dist/vue-resource.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <title>vue-resource的使用</title>

    <style>

    </style>
</head>
<body>
    <div id="app" clsas = "content">
            <h1>vue-resource的使用</h1>
            <a href="javascript:;" class = "btn btn-primary" v-on:click = "get">get</a>
            <a href="javascript:;" class = "btn btn-primary" @click = "getAxios">getAxios</a>
            <a href="javascript:;" class = "btn btn-primary" v-on:click = "post">post</a>
            <a href="javascript:;" class = "btn btn-primary" v-on:click = "postAxios">postAxios</a>
            <div>{{msgs}}</div>
    </div>

    <script>    
        new Vue ({
            el:"#app",
            data:{
                msgs:''
            },
            methods:{
                get:function() {
                    this.$http.get("../package.json" ,{
                        params:{
                            usedId:"34",
                            usedName:"get"
                        },
                        headers:{
                            toker:'12'
                        }
                    }).then(res =>{
                        this.msgs = res.data;
                    }).catch(res =>{
                        this.msgs = res.data;
                    })
                },
                getAxios:function() {
                    axios.get("../package.json" ,{
                        params:{
                            usedId:"34",
                            usedName:"getaxios"
                        },
                        headers:{
                            toker:'12'
                        }
                    }).then(res =>{
                        this.msgs = res.data;
                    }).catch(res =>{
                        this.msgs = res.data;
                    })
                },
                postAxios:function() {
                    axios.post("./package.json",{
                        data:{
                            userage:"234",
                            userNumber:"postaxios"
                        },
                        headers:{
                            tokers:7878
                        }
                    }).then(res => {
                        this.msgs = res.data;
                    })
                },
                post:function() {
                    this.$http.post("../package.json",{
                            userage:"234",
                            userNumber:"post",
                        headers:{
                            tokers:7878
                        }
                    }).then(res => {
                        this.msgs = res.data;
                    }).catch(res =>{
                        this.msgs = res.data;
                    })
                },
            }

        });
    </script>
</body>
</html>

PS：平时在别的地方也用 axios 挺好用的

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

直接引入速度快！

axios的API链接

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^