vue.js+axios请求的简单请求示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.min.js"></script>
    <script src="./axios.min.js"></script>
</head>
<body>

<div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
    <p>
        {{msg}}
    </p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"hello world",
        },
        methods:{
            getJoke(){          //axios.post(‘https://xxxxxx‘,{"usename":"小明"})
                axios.get("https://autumnfish.cn/api/joke")
                .then((response)=>{
                    this.msg=response.data;
                },(err)=>{
                    this.msg=err.message;
                })
            },

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

原文地址:https://www.cnblogs.com/qxh-beijing2016/p/12654914.html

时间: 2024-11-12 09:16:22

vue.js+axios请求的简单请求示例的相关文章

vue.js学习之 跨域请求代理与axios传参

vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{},改为这样: proxyTable: { '/api': { target: 'http://121.41.130.58:9090',//设置你调用的接口域名和端口号 别忘了加http changeOrigin: true, pathRewrite: { '^/api': ''//这里理解成用'/ap

vue.js axios使用

1. 自定义配置 /** * Created by superman on 17/2/16. * http配置 */ import axios from 'axios' import utils from '@/config/cookieUtils' // axios 配置 axios.defaults.baseURL = store.state.gateway_url axios.defaults.headers.post['Content-Type'] = 'application/json

vue.js的ajax和jsonp请求

首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax 和 jsonp 使用方法: //在Vue实例类使用 this.$http.get(url, [options]).then(successCallback, errorCallback); var test = new Vue({ el:'#v', data:{ jsonUrl:'xxxx', j

.net core3.1 webapi + vue.js + axios实现跨域

我所要讲述的是,基于.net core3.1环境下的webapi项目,如何去使用axios对接前端的vue项目 既然谈到axios,这里贴出axios的官方文档地址: http://www.axios-js.com/zh-cn/docs/ 首先是前端部分进行设置 第一步,在vue项目中安装axios 在vs code的终端中输入命令 npm install axios 稍等片刻,即可完成安装 第二步,构建axios的测试api 首先需要在main.js中,引入前面安装的axios 然后在某个组件

asp.net mvc + vue.js + axios.js

1.新建一个 MVC 应用程序 2.右键解决方案 添加VUE 3.搜索vue 1.安装axios.js ,用于数据请求,get , post axios 原文地址:https://www.cnblogs.com/foreverfendou/p/11785563.html

vue.js - axios Get方法传参给 .net core webapi。

1:在vue项目中通过params属性携带数据: let _self = this; axios({ method:'get', url:'http://localhost:5000/api/StuInFors/GetEFAsync/', params:{pagesize:10,pageindex:2} }).then(function(resp){ //document.write(JSON.stringify(resp.data)); console.log(resp.status); _s

Access control allow origin 简单请求和复杂请求

错误信息: XMLHttpRequest cannot load http://web.image.myqcloud.com/photos/v2/10008653/bhpocket/0/?sign=4FcLKd5B8-p4SkFVUEJtZ1omZT0xNDQ0NzExMDE5JnQ9MTQ0NDcwNzQxOSZyPTEzMDMyMDgzOTAmdT0wJmY9.No 'Access-Control-Allow-Origin' header is present on the requeste

Vue.js 和 MVVM 小细节

Vue.js 和 MVVM 小细节 MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Mode

Vue.js 和 MVVM 的小细节

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 View Model 的双向数据绑定,这使得View Model的状态改变可以自动传递给 View,这就是所谓的数据双向绑定. Vue.js 是一个提供 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel.ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻