Vue交互

作者: 星空有月 | 来源:发表于2016-11-29 00:10 被阅读148次

    vue本身不支持交互,所以在交互时需要引入模块vue-resource.js

    1.直接获取文件内的内容:

    ```

    'use strict';

    window.onload=function(){

    new Vue({

    el:'body',

    data:{

    a:12

    },

    methods:{

    get:function(){

    this.$http.get('a.txt').then(function(res){

    console.log(res.data);

    },function(err){alert(err)});

    }

    }

    });

    };

    ```

    2.get通过get.php'

    ```

    use strict';

    window.onload=function(){

    new Vue({

    el:'body',

    data:{

    d:12

    },

    methods:{

    get:function(){

    this.$http.get('get.php',{'a':1,'b':4}).then(function(res){

    console.log(res.data);

    },function(err){console.log(err.status)});

    }

    }

    });

    };

    ```

    3.post通过post.php'

    ```

    use strict';

    window.onload=function(){

    new Vue({

    el:'body',

    data:{

    a:1

    },

    methods:{

    post:function(){

    this.$http.post('post.php',{a:1,b:2},{emulateJSON:true}).then(function(res){alert(res.data)},function(err){console.log(err.data)});

    }

    }

    });

    ```

    };4.通过jsonp获取数据

    ```

    'use strict';

    window.onload=function(){

    new Vue({

    el:'body',

    data:{

    d:12

    },

    methods:{

    get:function(){

    this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?',{wd:4},{jsonp:'cb'}).then(function(res){

    alert(res.data.s);

    },function(err){console.log(err.status)});

    }

    }

    });

    };

    ```

    相关文章

      网友评论

      本文标题:Vue交互

      本文链接:https://www.haomeiwen.com/subject/mrbopttx.html