vue.js学习（四）

最新推荐文章于 2022-08-19 13:01:50 发布

celen_

最新推荐文章于 2022-08-19 13:01:50 发布

阅读量522

点赞数 1

分类专栏： vue.js学习文章标签： vue-js

本文链接：https://blog.csdn.net/litong94/article/details/58163915

版权

vue.js学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

继续前面的学习，上文链接。

正文

今天学习vue中的交互，即如何用vue中的ajax.

1.引入js库

在原来的基础上，再引入vue-recourse.js

2.vue-recourse.js特点

a. 体积小

vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。

b.支持主流浏览器

和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。

c.支持Promise API和URI Templates

Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

d.支持拦截器

拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

3.基本语法

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

4.如何用vue获取文本内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/vue-resource.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
        <div id="app">
            <input type="button" id="" value="按钮" @click="get()" />
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var vm=new Vue({
                el:"#app",
                data:{},
                methods:{
                    get:function(){
                        this.$http.get("../text.txt",{
                            //在这儿传递参数
                        }).then(function(res){
                            alert(res.data);
                        },function(res){
                            console.log(res.status);
                        })
                    }
                }
            })
        }
    </script>
</html>

效果图：
这里写图片描述

5.如何发送get请求。

其实在上面已经有用到get请求了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/vue-resource.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
        <div id="app">
            <input type="button" id="" value="按钮" @click="get()" />
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var vm=new Vue({
                el:"#app",
                data:{},
                methods:{
                    get:function(){
                        this.$http.get("../get.php",{
                            a:1,
                            b:2
                        }).then(function(res){
                            console.log(res.data);
                        },function(res){
                            console.log(res.status);
                        })
                    }
                }
            })
        }
    </script>
</html>

php代码：

<?php
$a=$_GET["a"];
$b=$_GET["b"];
echo $a+$b;
?>

6.如何发送post请求。

跟get请求有一些区别，大家都知道，在原生js中发送post请求时，需要写请求头。类似，需要加入这样一个参数：emulateJSON:true。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../js/vue-resource.js" type="text/javascript" charset="utf-8"></script>

    </head>
    <body>
        <div id="app">
            <input type="button" id="" value="按钮" @click="get()" />
        </div>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var vm=new Vue({
                el:"#app",
                data:{},
                methods:{
                    get:function(){
                        this.$http.post("../post.php",{
                            a:1,
                            b:2
                        },{
                            emulateJSON:true
                        }).then(function(res){
                            console.log(res.data);
                        },function(res){
                            console.log(res.status);
                        })
                    }
                }
            })
        }
    </script>
</html>

php代码：

<?php
$a=$_POST["a"];
$b=$_POST["b"];
echo $a-$b;
?>

参考文章：链接

今天就到这儿~

celen_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js学习（四）

前言继续前面的学习，上文链接。正文今天学习vue中的交互，即如何用vue中的ajax.1.引入js库在原来的基础上，再引入vue-recourse.js2.vue-recourse.js特点a. 体积小vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。b.支持主流浏览器和Vue.js一样，vue-resourc
复制链接

扫一扫