vue.js学习（四）

来源：互联网发布：做天猫,淘宝客服怎么样编辑：程序博客网时间：2024/05/01 20:08

前言

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

正文

今天学习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;?>

参考文章：链接

今天就到这儿~

0 0