vuejs与外界通信

最新推荐文章于 2024-02-24 13:00:00 发布

masterShaw

最新推荐文章于 2024-02-24 13:00:00 发布

阅读量899

点赞数

分类专栏： vue javaScript 文章标签： javaScript vuejs

本文链接：https://blog.csdn.net/mastershaw/article/details/55096887

版权

javaScript 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

源代码：

其中在vue项目中用npm安装jquery，vue-resource插件的的命令行：

npm install jquery

npm install vue-resource

import VueResource from 'vue-resource'
    import Vue from 'vue'
    import $ from 'jquery'
    import A from './a.js'
    Vue.use(VueResource);
    export default {
        name: 'hello',
        props: ['src'],
        data: function () {
            return {
                srcD: ''
            }
        },
        mounted: function () {
            this.srcD = this.src
        },
        watch: {
            srcD: function (newV, oldV) {
                console.info('src:' + this.srcD)
                var options = {
                    method: 'GET',
                    url: 'http://www.baidu.com'
                }
                //jquery
                $.ajax({
                    url:  'http://127.0.0.1:8080',
                    type: 'get',
                    dataType: 'html',
                    success: function (data){
                        console.log('jquery ajax 的請求')
                        console.log(data)
                    },
                    error: function(data) {
                        console.info(data)
                    }
                })
                //这个是对的
                var resource = this.$resource("http://127.0.0.1:8080")
                resource.get().then(function (response) {
                    console.log('this.$resource 的請求')
                    console.log(response.body)
                }).catch(function (response) {
                    console.log(response)
                })
                //这个也是对的
                this.$http.get("http://127.0.0.1:8080").then(function (res) {
                            // 处理成功的结果
                            console.log('this.$http 的請求')
                            console.info(res.body)
                            $(".contentCenter").html(res.body)
                        }, function (res) {
                            console.info(res)
                        }
                );
            }
        }
    }

结果：

src:http://www.baidu.com
jquery ajax 的請求
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>server</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

this.$resource 的請求
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>server</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

this.$http 的請求
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>server</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

这个界面是Hello.vue中的Script内容

vue-resource详解文档

masterShaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs与外界通信

源代码：其中在vue项目中用npm安装jquery，vue-resource插件的的命令行：npm install jquerynpm install vue-resourceimport VueResource from 'vue-resource' import Vue from 'vue' import $ from 'jquery' import A
复制链接

扫一扫

专栏目录