Vue的参数请求与传递

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

页面路由带参数的跳转:
1609164-20190818181850873-1337848490.png
参数接收:
1609164-20190818181934088-245404105.png

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

你可能感兴趣的:(javascript,json,测试,ViewUI)