Vue的参数请求与传递

Vue不同模板之间的参数传递

页面路由带参数的跳转:

参数接收:

Vue向服务器请求资源的两种方式

VUE-RESOURCE

1.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为,比如使用inteceptor在ajax请求时显示loading界面。

2.vue-resource特点:
(1)体积小
vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。
(2)支持主流的浏览器
和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。
(3)支持Promise API和URI Templates
Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。
URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。
(4)支持拦截器
拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。

VUE AXIOS

vue2.0之后,就不再对vue-resource更新,而是推荐使用axios。基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用。

功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF 攻击

vue的axios的请求示例

 getmassage() {
        var x = this
        this.axios.post('http://localhost:8080/dic/insert',Qs.stringify(x.dic)
        ).then(function (response){
          console.log(x.dic)
          console.log(response.data);
        }).catch(function (error){
          console.log(error);
        });
      }

原文地址:https://www.cnblogs.com/fishkk/p/11373355.html

时间: 2024-08-30 09:12:52

Vue的参数请求与传递的相关文章

使用AFN 发出请求并传递json字符串参数遇到的一点问题

一. 问题描述:在使用AFN的GET请求, 在传递参数的时候,由于参数是字典类型的,并且AFN的GET方法的params参数是一个字典,如果参数嵌套着字典时, 当你 传参时会发现返回的是空的JSON数据, 并且报参数为空的错误(Xcode并不报错, 返回的数据中报错), 很明显是语法问题. 二. 解决思路:由于是语法错误,所以问了后台,发现后台需要的不是json数据,而是字符串格式的数据,如果直接把json字典作为参数传递,就是直接把json发给了后台,后台是不接受的. 三. 解决方法:所以应该

Struts2Action请求转发以及参数 拦截器传递参数

@Result(name = "fail", type = "redirectAction", location = "gotologin.do?loginUrl=${loginUrl}&errorstr=${errorstr}") //Action请求转发以及参数 拦截器传递参数 ActionContext ac = invocation.getInvocationContext();ValueStack stack = ac.getV

Vue 配置全局请求参数遇到的问题 登录后使用 this.$router.push('/Index') 跳转的问题(场景有点怪)

设置了全局请求 global_var.js 1 const postData = new URLSearchParams() 2 postData.set('user_id', localStorage.getItem("user_id")) 3 postData.set('utoken', localStorage.getItem("utoken")) 4 5 export default { 6 postData 7 } 在登录后 使用无法使用全局变量的去拼接参

angularjs中ajax请求时传递参数的方法

method1方法使用的是params参数,该用法会把参数直接附加到url中 method2方法使用的是data参数,该参数会把页面参数类型从默认的multipart/form-data改为application/x-www-form-urlencoded类型,并且将传递的data解析为字符串,该方法会以post参数的方式传递 下面是代码部分: <html ng-app="myApp"> <head> <title>angularjs-ajax<

springMVC带参数请求重定向

SpirngMVC返回逻辑视图名 可以分下面几种情况: 1. servlet进行请求转发,返回到jsp页面,如  return "index.jsp" ; 2. servlet 返回结果,让请求 重定向到某个jsp页面 ,此时servlet 返回语句类似:  return  " redirect : index.jsp "; 3. servlet 的返回结果是 请求另外一个servlet   此时servlet 返回语句类似:  return  " red

从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.Vue发送Aj

vue03----生命周期、nextTick()、ref、filter、computed、vue中异步请求渲染问题(swiper不轮播)(在开发过程中遇到什么问题、踩过的坑)

### 1.vue的组件和实例都有生命周期,而且是一样的 生命周期:(组件从创建到销毁的过程) 创建 挂载 更新 销毁 组件到达某一个阶段就会自动触发某一些函数,这个函数就叫生命周期的钩子函数. 创建:组件创建的时候触发 beforeCreate created     组件刚创建的数据请求 挂载:创建完成挂载前后触发 beforeMount mounted     DOM的初始化操作 更新:数据发生改变的时候触发 beforeUpdate updated     数据的变化监听,尽量不要在这里

指针参数是如何传递内存的

1.1.5 指针参数是如何传递内存的? 如果函数的参数是一个指针,不要指望用该指针去申请动态内存.如下示例中,Test函数的语句GetMemory(str, 200)并没有使str获得期望的内存,str依旧是NULL,为什么? void GetMemory(char *p, int num) { p = (char *)malloc(sizeof(char) * num); } void Test(void) { char *str = NULL; GetMemory(str, 100); //

Python中的参数是如何传递的?

本文和大家分享的主要是python中参数传递方式相关内容,一起来看看吧,希望对大家学习python有所帮助. 位置参数 调用函数时,根据函数定义的参数位置来传递参数. 1 def right_triangle_area(a,b):2     return 1/2*a*b3 4 print(right_triangle_area(3,4))5 # 位置参数传递 求直角三角形面积,a.b分别为两条直角边,这里调用函数时使用的是位置参数传递.在位置参数传递中,参数的顺序是不可改变的. 关键词参数传递